小型設備上的Bootstrap中的網格對齊

Question

我有一個3列的行，其中包含使用引導程序的三個圖像。 就像下面一樣。

| | | |
| | | |
| | | |
| | | |
| --------------------- |
| | | |
| | | |
| | | |
| | | |

在較小的設備中，我只能看到兩欄和一欄為空的內容。 無論如何，我可以將這兩行連接在一起，並在較小的設備上獲得2x2 2x2 2x2模式嗎？

我的標記

<div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>
<div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>

Answer 1

這將在小型設備上為您提供兩列，而在平板電腦及更高版本上將為您提供三列。 .clearfix可確保各列正確清除其浮點數。

<div class="row">
  <div class="col-xs-6 col-sm-4"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix hidden-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="col-xs-6 col-sm-4"></div>
</div>

Answer 2

當然，您可以將所有內容放在一行中並使用col-xs-6以便在較小的屏幕上將寬度切換為50％。

  <div class="row">
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
   <div class="col-md-4 col-sm-4 col-xs-6"> </div>
  </div>

演示： http ： //bootply.com/mHzFhOfWzQ

Answer 3

通過使用正確的col-*類，您應該能夠使這些項目自動流動。 像這樣：

<div class="row">
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
 <div class="col-md-4 col-sm-6 col-xs-12"></div>
</div>

如果這對您不起作用，則可以應用hidden-*類來顯示視口大小的單獨行。

<div class="row hidden-sm">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>
<div class="row hidden-sm">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>

<div class="row hidden-lg">
 <div class="col-sm-6 col-xs-12"></div>
 <div class="col-sm-6 col-xs-12"></div>
</div>
<div class="row hidden-lg">
 <div class="col-sm-6 col-xs-12"></div>
 <div class="col-sm-6 col-xs-12"></div>
</div>
<div class="row hidden-lg">
 <div class="col-sm-6 col-xs-12"></div>
 <div class="col-sm-6 col-xs-12"></div>
</div>

這不是最好的黑客手段，但是如果您無法使其他工作正常，則可以使用。 請查看此內容以獲取有關如何執行此操作的更多信息 。