Question

我在所有项目中都使用Bootstrap，但我的问题始终是当列具有不同的高度时，它们不能正确对齐，特别是列不会在其他项下对齐。

我想在不使用同位素或砖石等库或任何其他类似库的情况下解决此问题。

假设我们有这段代码。

<div class="container">
  <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="item-product">
            <h4>Product Title</h4>
            <img src="some-image.jpg" alt="" class="img-responsive">
          </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="item-product">
            <h4>Product Title</h4>
            <img src="some-image.jpg" alt="" class="img-responsive">
          </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="item-product">
            <h4>Product Title</h4>
            <img src="some-image.jpg" alt="" class="img-responsive">
          </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="item-product">
            <h4>Product Title</h4>
            <img src="some-image.jpg" alt="" class="img-responsive">
          </div>
      </div>
  </div>
</div>

例如，当图像具有不同的高度时，还会修改列的高度，即出现问题的位置。我希望我解释一下。

感谢您的帮助。

Answer 1

一种方法是像这样使用CSS列宽..

.row {
 -moz-column-width: 25em;
 -webkit-column-width: 25em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.row > .col-md-4 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width: 100%; 
 float:none;
}

演示：http://bootply.com/NfLQFRjKRc

Answer 2

这是人们使用Bootstrap遇到的一个非常常见的问题，但是他们提供了多种解决方法。

首先，他们提供CSS class clearfix和Responsive-utilities，可以用来重置＆＃34;重置＆＃34;您的列在预期的断点处。

其次，如果您提前知道断点将全部为4列宽，那么您只需在每个第4个元素的末尾添加</div><div class="row">。

Answer 3

您可以使用masonry lib修复布局。只需添加以下代码：

$('.row').masonry({
    // options
    itemSelector: '.col-md-4'
});

Bootstrap 3中具有不同高度的列的对齐不正确

3 个答案: