在Twitter引导程序中创建一个网格（每个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

灵活解决方案怎么样？如果您不需要古老的浏览器支持，那就可以了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

为什么不使用自定义类，而不是使用bootstrap？

这样，您只需要在元素中添加vertical-align。

样本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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