【问题标题】: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-4col-lg-4;当查看区域为“大”或“中”时,样式将默认为最大的适当类,即col-md-4

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

        猜你喜欢
        • 2014-07-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-02-13
        • 1970-01-01
        • 1970-01-01
        • 2015-03-27
        • 1970-01-01
        相关资源
        最近更新 更多