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

您的代码没问题且一行可以包含超过12个单元格（例如图库），但问题是您的div高度不同，需要应用＆＃34;重置＆＃34;。要避免此问题，您需要在达到12个单元格时插入div类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以对所有单元格应用相同的高度。

Answer 2

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

所以很明显，只有4个元素可以包含在一行中，而你已经放置了6.你可以使用类.col-xs-2代替。

Answer 3

你在bootstrap网站上看到的代码是正确的，但意义不同。连续只有12列，我认为你告诉xs有加法（xs-12和xs-6），但意思是当你把它作为xs然后xs-6将转到下一行，如屏幕所示show，所以在行中只使用12列

Answer 4

这是因为在你发布的示例Bootstrap代码中，他们针对不同的视口大小使用不同的类。任何超过12的东西都只会＃34;叠加＆＃34;。

例如，在这一特定行中：

<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行，并在它们堆叠的位置创建，其中第一行为12，第二行为6.