小型设备上的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>

这不是最好的黑客手段，但是如果您无法使其他工作正常，则可以使用。 请查看此内容以获取有关如何执行此操作的更多信息 。