在 Twitter 引导程序中创建一个网格（每个 div 的响应高度相同）？

Question

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

这是我的代码：

<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

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

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

Answer 2

与其使用引导程序，为什么不使用自定义类？

这样，您只需在元素中添加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 3

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

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

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 类，您可以使用多个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