如何使引导列在一行中具有相同的高度？

Question

http://www.bootply.com/somVIZEXxC#这是我网站的 bootply，基本上我希望 cols col-lg-6 具有相同的高度，以便我在其中的图像现在是均匀的，一张图片延伸到另一张下方。

编辑：当前版本http://www.bootply.com/UIWf6q09h4

Answer 1

内容应该放在列中，并且只有列可以是行的直接子项

因此，从.row取出h1并将类.row-eq-height为.row如下所示：

.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row row-eq-height"></div>

这里的完整信息http://getbootstrap.com.vn/examples/equal-height-columns/

这里有一个最小的片段来说明：

 .row-eq-height{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <h1 class="text-center"> Where do we cater to? </h1> <div class="row row-eq-height"> <div class="col-xs-6"> <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive"> </div> <div class="col-xs-6" style="background: blueviolet"> <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive"> </div> </div>

就像我说的，我不知道你的 img 的限制（高度，如果可以是背景等）这里有一些提示来实现你想要的：

从row删除margin ，从col-删除填充，将width: 100%添加到您的图像中，如下所示：

 .row-eq-height{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; } .row-eq-height [class*="col-"]{ padding: 0; } .row-eq-height img{ width: 100%; }

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <h1 class="text-center"> Where do we cater to? </h1> <div class="row row-eq-height"> <div class="col-xs-6"> <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive"> </div> <div class="col-xs-6" style="background: blueviolet"> <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive"> </div> </div>

如果图像可以是背景，您可以定义特定的比例高度，您可以使用 padding-top，比如说 4:3，即 3 * 100 / 4 = 75 = padding-top

所以你可以这样做：

 .row-eq-height{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; } .row-eq-height [class*="col-"]{ padding: 0; } .img-container{ background-size: cover; padding-top: 75%; /*you can change it to obtain a desired height*/ }

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <h1 class="text-center"> Where do we cater to? </h1> <div class="row row-eq-height"> <div class="col-xs-6"> <div class="img-container" style="background-image: url(http://i.stack.imgur.com/gijdH.jpg?s=328&g=1)"></div> </div> <div class="col-xs-6"> <div class="img-container" style="background-image: url(http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg)"></div> </div> </div>

Answer 2

只需将“等高”类添加到列父项

$('.equal-heights').each(function(){  
    var highestBox = 0;
    $(this).children('[class*="col-"]').each(function(index, el){
        if( $(el).height() > highestBox ) highestBox = $(el).height();
    });  
    $(this).children('[class*="col-"]').css('height',highestBox);
});

html会是这样的......

<div class="row equal-heights">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

看到这支笔...

Answer 3

尝试取出你的

<h1 class="text-center"> Where do we cater to? </h1>

因为一个“行”意味着加起来为 12。现在，你在行中有这个 h1 和你的两个 col-lg-6，它们应该在他们自己的一行中 (6+6=12)。

h1 应该在它自己的行中，有自己的 col-lg-12，或者你可能想要的任何东西。

Answer 4

您是否尝试使用max-height: ？

继承人你的代码http://www.bootply.com/wVSqmPKERL

向列中添加了另一行并添加了刚刚添加的height-fix类

一个max-height属性，您可以将其设置为您需要的任何值。

编辑如果图像很小，您也可以将其与min-height结合使用

Answer 5

这是一个带有图像的响应式网格。 图像容器具有相同的高度，图像本身垂直居中；

 .grid { margin-top: 25px; display: flex; flex-wrap: wrap; } .grid>[class*='col-'] { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 15px; } .grid img { margin: auto 0; } @media (max-width: 767px) { .container { max-width: 100%; } } @media (max-width: 575px) { .container { max-width: 100%; padding-left: 0; padding-right: 0; } .posts-grid>[class*='col-'] { padding-left: 5px; padding-right: 5px; } }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="grid"> <div class="col-sx-6 col-md-4 col-lg-2"> <img src="http://placehold.it/350x300" class="img-responsive"> </div> <div class="col-sx-6 col-md-4 col-lg-2"> <img src="http://placehold.it/350x450" class="img-responsive"> </div> </div> </div>