Question

首先是链接：http://isotopethemes.com/extenso/all-sliders.html

有一个带三列的bootstrap行，每列都分配了'col-lg-4 col-md-4 col-sm-6'。一切都在992px以上的视口中。低于992px，列表2和3向右浮动，不确定原因。

这已经发生过，但只是添加一个解决了问题，但这似乎是一个不同的情况。

任何帮助将不胜感激。

HTML代码：

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
   </div>
</div>

Answer 1

那是因为你使用了三个col-sm-6而你只有12列要填充。

如果你想让所有人都在同一行，那应该是这样的：

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
   </div>
</div>

这是你想要彼此重叠：

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
   </div>
</div>

Answer 2

由于col-*-*类，所有列都向左浮动。您在“布局1”行中看到的问题是您的第一列和第二列具有相同的高度，这会导致第三列float: left到包含div。在“布局2”和“布局3”行中，第一列的内容（高度）比第二列的内容（高度）更多。这会强制第三列到float: left到第一列。要获得简单的解决方案，您可以将代码更改为：

<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
   </div>
</div>

当观看大小为“中等”（根据引导程序）或更大时，您将在同一行上看到三列。对于“小”观看大小，前两列将占据整个第一行，第三列将占据整个第二列（由col-sm-12类提供）。作为旁注，您无需在同一元素上同时使用col-md-4和col-lg-4;当查看区域为“大”或“中”时，样式将默认为最大的适当类，即col-md-4。

Answer 3

你遇到的问题是你的右上方div比左边的那个短，所以第三个div被推到它下面以便占用更少的垂直空间。

要避免这种情况，请考虑手动设置div高度或使用Javascript-Equal-Height-Responsive-Rows之类的插件。

Bootstrap 3：调整大小时右列浮动

3 个答案: