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

【问题标题】：Bootstrap 3: columns float right when resizedBootstrap 3：调整大小时列向右浮动
【发布时间】：2014-11-02 08:34:02
【问题描述】：

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

有一个引导行，其中包含三列，每列分配有“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>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

谢谢你的回答。但这是故意的，我希望它们中的两个占据一排，另一个占据下一行。
好吧，正如 Valerio 所说，这是因为 div 的高度不同。

【解决方案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。

【讨论】：

【解决方案3】：

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

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

【讨论】：