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

可在以下网址查看代码：

弗斯特
第二
第三

从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>

.col-xs-12.col-sm-6.col-md-8
.col-xs-6.col-md-4
.col-xs-6.col-sm-4
.col-xs-6.col-sm-4
.col-xs-6.col-sm-4

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

此外，是否可以将所有列（例如，30列）写入一行，并期望引导正确地布局它们

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

---

很明显，一行中只能包含4个元素，而您已经放置了6个元素。您可以改用class

.col-xs-2

。

在引导站点上看到的任何代码都是正确的，但含义不同。在一行中只有12列，我想你是在说xs有加法（xs-12和xs-6），但意思是当你把它设为xs时，xs-6将转到下一行，如屏幕显示所示，所以只在第行使用12列，这是因为在您发布的示例引导代码中，它们对不同的视口大小使用不同的类。而且任何超过12的东西都会“叠加”

例如，在这一行中：

<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>

.col-xs-12.col-sm-6.col-md-8
.col-xs-6.col-md-4

md

视口加起来为12，并将保留在一行内，大小分别为8和4。

---

xs

视口总计为18行，将在它们堆叠的位置创建2行，其中第一行为12行，第二行为6行。

您的代码正常，一行可以包含12个以上的单元格（例如图库），但您的问题是div的高度不同，需要应用“重置”。为了避免这个问题，您需要在达到12个单元格时插入一个div类clearfix

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

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

。。。
第二
...

关于引导clearfix的文档：

---

您还可以添加javascript，将相同高度应用于所有单元格。

对不起，我以为您使用的是md视口。Try：（我已经编辑了我以前的评论）

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