Bootstrap3 中列宽之和大于 12 时出现奇怪的效果？

Question

代码可以在

查看

http://www.bootply.com/LUNqVTU2nj

<div class="container">
<div class="row">
    <div class="col-md-3" >
      <img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <div class="col-md-3" >
      <h2> First </h2>
    </div>
      <div class="col-md-3" >
      <img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <div class="col-md-3" >
      <h2> Second </h2>
    </div>
    <div class="col-md-3">
      <img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <div class="col-md-3" >
      <h2> Third </h2>
    </div>  
  </div>
</div>

从 Bootply 中可以看出，第三张图片没有在正确的位置渲染。

我认为这是错误的，因为一行不能包含总宽度大于12的列，但是在Bootstrap3官方网站上，我看到了这样的代码：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

这是错误的吗？如果不是，为什么我的代码不能工作..

此外，是否可以将所有列（例如30列）写在一行中并期望bootstrap正确布局它们？

Answer 1

.col-md-3{width: 25%;}
.col-sm-4{width: 33.3333333%}

显然一行中只能包含 4 个元素，而您放置了 6 个元素。您可以使用 class .col-xs-2 代替。

Answer 2

您在 bootstrap 站点上看到的任何代码都是正确的，但含义不同。在一行中只有 12 列，我认为你是在讲述 xs 有加法（xs-12 和 xs-6），但意思是当你将它作为 xs 时，xs-6 将转到下一行，如屏幕所示显示，所以在行

中仅使用 12 列

Answer 3

这是因为在您发布的示例 Bootstrap 代码中，它们针对不同的视口大小使用了不同的类。此外，任何超过 12 的东西都会 "stack up".

所以例如在这个特定的行中：

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

md 视口加起来为 12，将保持在一行中，大小为 8 和 4。 xs 视口加起来为 18，将在它们堆叠的位置创建 2 行，其中第一行为 12，第二行为 6。

Answer 4

您的代码没问题，一行可以包含超过 12 个单元格（例如画廊），但您的问题是您的 div 高度不同，您需要应用 "reset".为避免此问题，您需要在达到 12 个单元格时插入 div class clearfix。

我的意思是，在你的例子中：

...
<div class="col-md-3">
    <h2> Second </h2>
</div> 
<div class="clearfix visible-md-block visible-lg-block">
...

关于 Bootstrap clearfix 的文档：http://getbootstrap.com/css/#grid-responsive-resets。

您还可以添加 javascript 以对所有单元格应用相同的高度。

Bootstrap3 中列宽之和大于 12 时出现奇怪的效果？

Strange effect when sum of the column width is larger than 12 in Bootstrap3?

javascript

css

angularjs

twitter-bootstrap

twitter-bootstrap-3