twitter-bootstrap 如何使引导列在一行中具有相同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31800298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap columns the same height in a row?
提问by TheNoob
http://www.bootply.com/somVIZEXxC#Here is the bootply for my website, basically I want the cols col-lg-6 to be the same height so that the images I have inside them are even, at the moment, one image stretches below the other one.
http://www.bootply.com/somVIZEXxC#这是我网站的 bootply，基本上我希望 cols col-lg-6 具有相同的高度，以便我在其中的图像现在是均匀的，一张图片延伸到另一张下方。
Edit: Current version http://www.bootply.com/UIWf6q09h4
回答by Yandy_Viera
Content should be placed within columns, and only columns may be immediate children of rows
内容应该放在列中，只有列可以是行的直接子项
So get out the h1from the .rowand set the class .row-eq-heightto .rowlike this:
所以走出h1从.row与类集合.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>
Here the full information http://getbootstrap.com.vn/examples/equal-height-columns/
这里的完整信息http://getbootstrap.com.vn/examples/equal-height-columns/
Here a minimal snippet to illustrate:
这里有一个最小的片段来说明：
.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>Like I said I don't know the limitation of your img (height, if can be background, etc.) Here some tips to achieve what you want:
就像我说的，我不知道你的 img 的限制（高度，如果可以是背景等）这里有一些技巧可以实现你想要的：
Remove the marginfrom rowand the padding from col-, add width: 100%to your image like this:
删除marginfromrow和填充 from 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>If the image can be background you can define a specific proportional height you can use padding-top, let say 4:3 that would be 3 * 100 / 4 = 75 = padding-top
如果图像可以是背景，您可以定义特定的比例高度，您可以使用 padding-top，比如说 4:3，即 3 * 100 / 4 = 75 = padding-top
So you can do this:
所以你可以这样做：
.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>回答by MajiD
just add the "equal-heights" class to the columns parent
只需将“等高”类添加到列父项
$('.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);
});
the html would be like this...
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>
回答by Razvan Zamfir
Here is a responsive grid with images. The image containershave equal height and the images themselvesare vertically centered;
这是一个带有图像的响应式网格。图像容器具有相同的高度，图像本身垂直居中；
.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>回答by user3089840
Try taking out your
尝试取出你的
<h1 class="text-center"> Where do we cater to? </h1>
because one "row" is meant to add up to 12. Right now, you have this h1 in the row along with your two col-lg-6, which should be in a row of their own (6+6=12).
因为一个“行”意味着加起来等于 12。现在，您在行中有这个 h1 以及您的两个 col-lg-6，它们应该在它们自己的一行中 (6+6=12)。
The h1 should be in its own row with its own col-lg-12, or whatever you might want.
h1 应该在它自己的行中，有自己的 col-lg-12，或者你可能想要的任何东西。
回答by NooBskie
Did you try using max-height:?
你试过用max-height:吗？
heres a fork of your code http://www.bootply.com/wVSqmPKERL
这是你的代码http://www.bootply.com/wVSqmPKERL 的一个分支
added another row to the columns and add the class of height-fixwhich just adds
向列添加另一行并添加height-fix刚刚添加的类
a max-heightattribute that you can set to whatever you need.
一个max-height属性，你可以设置任何你所需要的。
editYou can also combine this with min-heightif the images are to small
编辑min-height如果图像太小，
您也可以将其与
