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

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>