html - 小型设备上 Bootstrap 中的网格对齐

Question

我有一个 3 列的行，其中包含使用 Bootstrap 的三个图像。就像下面一样。

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

在较小的设备中，我遇到的问题是我只能看到两列和一列内容为空。无论如何，我可以将这两行连接在一起并在较小的设备上获得 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 确保列正确清除它们的 float 。

<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>