本文翻译自:How can I make Bootstrap columns all the same height?
I'm using Bootstrap. 我正在使用Bootstrap。 How can I make three columns all the same height? 如何使三根柱子的高度相同?
Here is a screenshot of the problem. 这是问题的屏幕截图。 I would like the blue and red columns to be the same height as the yellow column. 我希望蓝色和红色列与黄色列的高度相同。
Here is the code: 这是代码:
<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>
#1楼
参考:https://stackoom.com/question/1Kdlw/如何使Bootstrap列都具有相同的高度
#2楼
Solution 4 using Bootstrap 4 使用Bootstrap 4的解决方案4
Bootstrap 4 uses Flexbox so there's need for extra CSS. Bootstrap 4使用Flexbox,因此需要额外的CSS。
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
Solution 1 using negative margins (doesn't break responsiveness) 解决方案1使用负边距(不会破坏响应能力)
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Solution 2 using table 解决方案2使用表
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution. 使用Flex的解决方案3已于2015年8月添加。此之前发布的注释不适用于此解决方案。
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
#3楼
You only show one row so your use case may be limited to just that. 您只显示一行,因此您的用例可能仅限于此。 Just in case you have multiple rows, this plugin - github Javascript-grids - works perfectly! 万一您有多行,这个插件-github Javascript-grids-可以完美地工作! It makes each panel expand to the tallest panel, giving each row potentially a different height based on the tallest panel in that row. 它使每个面板都可以扩展到最高的面板,从而基于该行中的最高面板为每一行提供不同的高度。 It's a jquery solution vs. css, but wanted to recommend it as an alternative approach. 与CSS相比,这是一个jquery解决方案,但想推荐它作为替代方法。
#4楼
Thought I'd just add that the answer given by Dr.Flink can also be applied to a Bootstrap 3 form-horizontal
block - which can be very handy if you want to use background colours for each cell. 以为我只是补充说,Dr.Flink给出的答案也可以应用于Bootstrap 3 form-horizontal
块-如果您要为每个单元格使用背景色,这将非常方便。 In order for this to work for bootstrap forms, you would need to wrap the form contents which just serves to replicate a table-like structure. 为了使它适用于引导表单,您需要包装表单内容,该内容仅用于复制类似表格的结构。
The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it's normal thing on the smaller screen(s). 下面的示例还提供了CSS,该CSS演示了一个附加的媒体查询,该查询使Bootstrap 3可以简单地接管并在较小的屏幕上正常进行。 This also works in IE8+ . 这在IE8 +中也适用。
Example: 例:
<form class="form-horizontal" role="form">
<div class="form-wrapper">
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">My Label</label>
<div class="col-xs-12 col-sm-10">
Some content
</div>
</div>
</div>
</form>
.form-wrapper {
display: table;
}
.form-wrapper .form-group {
display: table-row;
}
.form-wrapper .form-group .control-label {
display: table-cell;
float: none;
}
.form-wrapper .form-group label + div {
display: table-cell;
float: none;
}
@media (max-width: 768px) {
.form-wrapper {
display: inherit;
}
.form-wrapper .form-group {
display: block;
}
.form-wrapper .form-group .control-label {
display: inherit;
}
.form-wrapper .form-group label + div {
display: inherit;
}
}
#5楼
Update 2018 更新2018
Best approach for Bootstap 3.x -- using CSS flexbox (and requires minimal CSS).. Bootstap 3.x的最佳方法 -使用CSS flexbox (并且需要最少的CSS)。
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
Bootstrap same height flexbox example Bootstrap相同高度的Flexbox示例
To only apply the same height flexbox at specific breakpoints (responsive), use a media query. 要仅在特定的断点处应用相同高度的flexbox(响应),请使用媒体查询。 For example, here is sm
(768px) and up: 例如,这是sm
(768px)及以上:
@media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
This solution also works well for multiple rows (column wrapping): 此解决方案也适用于多行(列包装):
https://www.bootply.com/gCEXzPMehZ https://www.bootply.com/gCEXzPMehZ
Other workarounds 其他解决方法
These options will be recommended by others, but are not a good idea for responsive design. 这些选项将由其他人推荐,但对于响应式设计不是一个好主意 。 These only work for simple single row layouts w/o column wrapping. 这些仅适用于不带列换行的简单单行布局。
1) Using huge negative margins & padding 1)使用巨大的负边距和填充
2) Using display:table-cell (this solution also effects the responsive grid, so a @media query can be used to only apply table
display on wider screens before the columns stack vertically) 2)使用display:table-cell (此解决方案还会影响响应网格,因此@media查询只能用于在垂直堆叠列之前在更大的屏幕上应用table
显示)
Bootstrap 4 引导程序4
Flexbox is now used by default in Bootstrap 4 so there is no need for the extra CSS to make equal height columns: http://www.codeply.com/go/IJYRI4LPwU 现在默认情况下在Bootstrap 4中使用了Flexbox,因此不需要额外的CSS来制作等高的列: http : //www.codeply.com/go/IJYRI4LPwU
Example: 例:
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
#6楼
You can use inline-flex as well which works pretty good and may be a little cleaner than modifying every row element with CSS. 您也可以使用inline-flex,效果非常好,并且可能比使用CSS修改每个行元素更简洁。
For my project I wanted every row who's child elements had borders to be the same height so the borders would look jagged. 对于我的项目,我希望每一行的子元素的边框都具有相同的高度,以使边框看起来参差不齐。 For this I created a simple css class. 为此,我创建了一个简单的CSS类。
.row.borders{
display: inline-flex;
width: 100%;
}