在 Twitter bootstrap 中创建网格（每个 div 都是相同的响应高度）？

Question

我正在尝试在 bootstrap 中创建一个网格，当我将多列（将跨越多行）添加到一行中时，它看起来像这样：

这是我的代码：

<div class="row">
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

如果我使用 .row-eq-height，它会将其转换为 flexbox 布局，实际上所有行的高度都相同，但它会将每一列放在同一行上，如下所示：

最后，我的另一个选择是手动将每一行拆分为三个不同的列，这会输出我想要的行，但也非常不切实际，因为 div 是动态添加的 -有些页面可能只有 2 div，有些可能有 10 个或更多。

关于如何添加简单网格的任何想法，其中每个 div/.col 具有相同的高度？谢谢。

Answer 1

与其使用 bootstrap，不如使用自定义类？

那样的话，您需要做的就是在您的元素中添加一个 vertical-align。

演示：

.normal,.bigger,.short {
  height: 50px;
  display: inline-block;
  width: 28%;
  min-width:150px;
  background: lightgray;
  margin:2px;
}
.bigger{
  height:100px;
  vertical-align:top;
  }
.short{
  height:20px;
  }

<div class="bigger">longer</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="short">short size</div>

Answer 2

有时无法像@WhiteLine 建议的那样使用行，因为您可能希望在同一元素上使用多个 col-XX-XX classes。

我之前解决这个问题的方法是添加一个空的 div 和 clearfix class 和一个 visible-XX class 来模拟换行符.

Bootply Demo

<div class="row">
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-md visible-lg clearfix"></div>

    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

如果您使用多个 col-XX-XX classes，您可以使用多个 clearfix 在不同分辨率下可见的 div...

<div class="row">
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br><br> This one's a little longer and breaks the horizontal alignment with other columns.<br></div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-md clearfix"></div>

    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-lg clearfix"></div>

    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

Example using multiple col-XX-XX classes

Answer 3

弹性解决方案怎么样？如果您不需要古老的浏览器支持，这是可行的方法。

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between
}
.flexcol {
    width: 30%;        /* adjust this for different column number */
    background: #eee;
    margin-bottom: 2vw;
    padding: 1vw;
}
.flexcol img {
    max-width: 100%;
}

<div class="row">
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

可以在容器内部使用相同的方法，这里演示： http://jsfiddle.net/fpfbcs3c/

在 Twitter bootstrap 中创建网格（每个 div 都是相同的响应高度）？

Creating a grid (each div is the same responsive height) in Twitter bootstrap?

css

twitter-bootstrap

grid-layout