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确保列正确清除浮动。

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

这不是最好的，也不是一种黑客攻击，但如果你无法获得其他任何工作，它就可以工作。请查看更多information on how to do this。

在小型设备上的Bootstrap中进行网格对齐

3 个答案: