如何保持相同大小的引导列以便它们正确捕捉？

Question

我正在构建一个带有引导列的简单站点，但我希望它们保持相同的高度，因为从现在开始，如果该行中的最后一列高度较短，则放置下一列在它下面而不是在左边的下一行。我怎么能这样做？

.col-xs-3 {
  border: 1px solid red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row ">
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

---

编辑：由于 sn-p 没有正确显示以显示我的问题，这里是一个代码笔：http://codepen.io/sgarcia-dev/pen/zqbjBg

---

edit2：我看到了其他线程，但这些线程显示了如何将它们设置为相同的高度而无需列响应。由于 IE 的原因，我不能使用 flexbox，并且我需要保持 HTML 足够干净，以便这些列具有多个列大小（col-md-3、col-xs-6 等）。我目前由于某种原因不起作用的解决方案是这样做的：

.col-sm-3:nth-child(3n):after {
  content: "";
  display: table;
  clear: both;
}

有人可以帮忙吗？

Answer 1

放置 <div class="clearfix"></div> 应该可以解决问题

<div class="container">
  <div class="row ">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
    <div class="clearfix"></div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

Answer 2

从问题和您之前回复的 cmets 看来，您实际上并不想要/需要大小相等的列（这将包括背景、边框等所有内容都延伸到相同高度，这将相当容易用 flexbox 来实现——也许在支持浏览器方面是不错的），至少不是主要目标；但是您宁愿只希望流到第二个（，第三个，...）“行”或更确切地说行上的“框”都具有其顶部边缘的y位置与最高列的底部边缘的y位置相匹配上一行。

这很容易实现，如果你放弃引导程序的浮动，而是在列上使用display:inline-block。

当然，您必须消除 inline-block 带来的列之间的空间 - 但这是一个众所周知的问题，有几个可能的修复方法，请参阅 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - 我在这里是父元素，但如果您需要满足旧版 IE 的要求，您可能需要对列上的“重新设置”使用绝对字体大小，而不是我在示例中使用的 rem。

.row {
  font-size: 0; /* fight white space */
}
.col-md-3,
.col-sm-6 { /* add selectors for more of the col-variants if needed */
  border: 1px solid red;

  float: none; /* disable floating */
  display: inline-block; /* make inline-block instead */
  vertical-align: top; /* have top edges of elements on one line align */

  font-size: 1.5rem; /* reset font-size */
}

http://codepen.io/anon/pen/ezJQLM

恕我直言，这个解决方案有一个很好的好处/优势，因为您不需要更改任何关于引导程序的列宽定义或使用冒险放置的 clearfix 来调整浮动的形状。

Answer 3

你有 1 个col 被推到另一个下面的原因是因为你正在使用这个类：col-xs-3 有 5 个列。 Bootstrap 解决了这样一个事实，即同一“行”上的每个“行”只能有 12 个相加总数

3 * 5 = 15，因此您将 1 推到它自己的“行”，允许 4 在同一行；3 * 4 = 12。

如果您改为使用col-xs-2 类，您将拥有所有在同一“行”； 2 * 5 = 10

执行以下操作来纠正您的问题：

.col-xs-2 {
  border: 1px solid red;
}

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row ">
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

---

根据评论进行编辑：

要将另一列推送到它自己的行，请将其放在另一个具有 row 类的 div 中。

    <div class="container">
  <div class="row ">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>

  </div>
  <div class="row">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>


.col-sm-3 {
  border: 1px solid red;
}