我正在使用Bootstrap。如何让三根柱子都一样高呢?

下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。

代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div>


当前回答

如果这在您的上下文中有意义,您可以在每次休息后添加一个空的12列div,它作为包含行中最高单元格底部的分隔符。

< div class = "行" > <div class="col-xs-6">一些内容</div> < div class = " col-xs-6”> 很多内容!很多内容!很多内容!很多内容!很多内容! < / div > <div id="space -div" class="col-x -12"></div> . <div class="col-xs-6">更多内容 < / div > < !——这个你忘了关——>

希望这能有所帮助!

其他回答

我使用clearfix这个超级简单的解决方案,它没有任何副作用。

下面是AngularJS的一个例子:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

还有一个关于PHP的例子:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

来自:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

例子:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

这里改编自几个答案。一旦IE8和ie9被淘汰,一旦Android 2被淘汰,基于flexbox的答案就是正确的方法。X已经死了,但在2015年并不是这样,在2016年也不会。IE8和ie9的使用率仍占4-6%,这取决于你如何衡量,对于许多企业用户来说,情况要糟糕得多。http://caniuse.com/#feat=flexbox

display: table, display: table-cell的技巧是向后兼容的,一个很棒的事情是唯一严重的兼容性问题是Safari的问题,它强制box-sizing: border-box,这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table

显然,您可以添加更多做类似事情的类,如.equal-height-md。我将这些标记与div绑定在一起,以便在受限制的使用中获得较小的性能收益,但您可以删除标记,使其像Bootstrap的其余部分一样更通用。

注意,这里的jsfiddle使用CSS,因此,Less将提供的内容硬编码在链接的示例中。例如@screen-sm-min已经被Less插入的- 768px所取代。

如果这在您的上下文中有意义,您可以在每次休息后添加一个空的12列div,它作为包含行中最高单元格底部的分隔符。

< div class = "行" > <div class="col-xs-6">一些内容</div> < div class = " col-xs-6”> 很多内容!很多内容!很多内容!很多内容!很多内容! < / div > <div id="space -div" class="col-x -12"></div> . <div class="col-xs-6">更多内容 < / div > < !——这个你忘了关——>

希望这能有所帮助!