jquery - Bootstrap 3 : columns float right when resized

Question

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

Bootstrap 行包含三列，每列分配有“col-lg-4 col-md-4 col-sm-6”。在 992 像素以上的视口(viewport)中一切都很好。在 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

那是因为您使用了 3 个 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>