Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改：由于代码段没有正确显示以显示我的问题，因此这是一个代码堆：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

从问题和对先前回复的评论中，听起来好像你实际上并不需要/需要相同大小的列（其中包括背景，边框延伸到相同高度的所有内容，这将是相当容易的使用flexbox实现 - 可能在支持浏览器方面做得很好，至少不是主要目标;但你只是想要＆＃34;盒子＆＃34;流到第二行（，第三行，......）＆＃34;行＆＃34;或者更确切地说，所有行的上边缘的y位置与上一行中最高列的下边缘的y位置匹配。

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

当然，您必须消除inline-block带来的列之间的空间 - 但这是一个众所周知的问题，有几个可能的修复，请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - 我选择了字体 - 这里父元素的大小为0，但如果你需要满足较旧的IE，你可能需要使用绝对字体大小来重新设置＆＃34;在列而不是我在示例中使用的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

恕我直言这个解决方案有一个很好的好处/优势，因为你不需要改变任何关于bootstrap的列宽定义或使用冒险放置的clearfix来将浮动摔成形状。

Answer 3

你有1 col被推到另一个之下的原因是你使用的课程：col-xs-3有5个col。 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>

编辑评论：

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

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

如何保持相同大小的bootstrap列以便正确捕捉？

3 个答案: