如何保持相同大小的引导程序列，以使它们正确对齐? [英] How to keep bootstrap columns of same size so that they snap correctly?

问题描述

我正在建立一个带有引导程序列的简单站点，但我希望它们保持相同的高度，因为截至目前，如果该行中的最后一列的高度不足，则会放置下一个在它下面而不是在左下一行.我该怎么办?

I'm building a simple site with bootstrap columns, but I would like for them to stay with the same height, since as of right now, if the last column in the row is short in height, the next one gets placed below it instead of on the next row to the left. How could I do this?

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

编辑:由于该代码段无法正确显示以显示我的问题，因此以下是一个代码笔:

edit: since the snippet isn't showing correctly to show my issue, here is a codepen: http://codepen.io/sgarcia-dev/pen/zqbjBg

edit2 :我看到了其他线程，但是这些线程显示了如何将它们设置为相同的高度而无需列进行响应.由于IE的原因，我不能使用flexbox，并且我需要保持HTML足够干净，以使这些列具有多个列大小(col-md-3，col-xs-6等).我当前的出于某种原因无法正常工作的解决方案是这样做的:

edit2: I saw the other threads, but those show how to set them to the same height without needing columns to be responsive. I can't use flexbox for IE reasons, and I need to keep the HTML clean enough so that these columns have more than one column size (col-md-3, col-xs-6, etc). My current solution which for some reason doesn't work is doing this:

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

有人可以帮忙吗?

推荐答案

从问题和您对以前的答复的评论看来，您似乎实际上并不需要/需要相等大小的列(其中包括诸如背景，边框对于所有人都延伸到相同的高度，使用flexbox会很容易实现-可能在支持浏览器时很不错)，至少不是主要目标；但是您只希望流到第二个(第三个……")行"上的框"，或者更确切地说，要使它们的顶边的y位置与最高列的底边的y位置匹配前一行.

From the question and your comments on previous replies, it sounds as if you do not actually want/need equal sizes columns (which would include stuff such as backgrounds, borders extending to the same height for all, which would be rather easy to achieve with flexbox - maybe as nice-to-have in supporting browsers), at least not as the main goal; but you rather just want the "boxes" that flow onto a second (, third, ...) "row" or rather line to all have the y-position of their top edge match that of the bottom edge of the highest column in the previous row.

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

That is quite easy to achieve, if you forgo bootstrap's floating, and use display:inline-block on the columns instead.

然后，您当然必须消除inline-block附带的列之间的空间-但这是一个众所周知的问题，有多种可能的修复方法，请参见rem在示例中使用.

Then of course you will have to eliminate the space between the columns that inline-block brings with it - but that is a well known issue with several possible fixes, see https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - I chose the font-size 0 on the parent element here, but if you need to satisfy older IE you might need to use an absolute font-size for the "re-set" on the columns rather than the rem I used in the example.

.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来使浮标变形为形状.

IMHO this solution has a nice benefit/advantage in that you don't need to alter anything regarding bootstrap's column width definitions or wrestle floats into shape using adventurously placed clearfixes.

这篇关于如何保持相同大小的引导程序列，以使它们正确对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！