如何使引导列的高度相同?

我正在使用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>

1199395 次浏览
小开
最佳答案

最新解决方案(2022年)

解决方案4使用Bootstrap 4或5

Bootstrap 4和5默认使用Flexbox，因此不需要额外的CSS。

Demo

<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://placekitten.com/100/100/"></div><div class="col-md-4" style="background-color: green">some more content</div></div></div>

解决方案1使用负边距(不会破坏响应性)

Demo

.row{overflow: hidden;}
[class*="col-"]{margin-bottom: -99999px;padding-bottom: 99999px;}

解决方案2使用表

Demo

.row {display: table;}
[class*="col-"] {float: none;display: table-cell;vertical-align: top;}

方案3使用flex增加到2015年8月。在此之前发布的评论不适用于此解决方案。

Demo

.row {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display:         flex;flex-wrap: wrap;}.row > [class*='col-'] {display: flex;flex-direction: column;}
小开

您只显示一行，所以您的用例可能仅限于此。如果你有多行，这个插件github Javascript-grids可以完美工作!它使每个面板扩展到最高的面板，根据该行中最高的面板为每一行提供不同的高度。这是一个jquery解决方案vs. css，但想推荐它作为一个替代方法。

小开

我想我只是补充一下，Dr.Flink给出的答案也可以应用到Bootstrap 3 form-horizontal块——如果你想为每个单元格使用背景色，这是非常方便的。为了使这适用于引导表单，您需要包装表单内容，这只是为了复制一个类似表格的结构。

下面的例子还提供了CSS，它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。

例子:

<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;}}
小开

更新2021

引导4 + 5

Flexbox现在在Bootstrap 4(和Bootstrap 5)中默认使用，因此不需要额外的CSS来创建等高列:https://www.codeply.com/go/IJYRI4LPwU

例子:

<div class="container"><div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div></div>

引导3

bootstap3 .x的最佳方法 -使用CSS flexbox(需要最少的CSS)…

.equal {display: flex;display: -webkit-flex;flex-wrap: wrap;}

Bootstrap相同高度flexbox示例

若要仅在特定断点(响应式)应用相同高度的flexbox，请使用媒体查询。例如，这里是sm (768px)及以上:

@media (min-width: 768px) {.row.equal {display: flex;flex-wrap: wrap;}}

此解决方案也适用于多行(列换行):https://www.codeply.com/go/bp/gCEXzPMehZ

其他解决方法

这些选项会被其他人推荐，但对于响应式设计来说是0。这些只适用于简单的单行布局，没有列换行。

  1. 使用# < p > 0

  2. 使用<强> # 0 < / >强(这个解决方案也影响响应网格，所以@media查询可以用来只应用table显示在更宽的屏幕上，在列垂直堆叠之前)

小开

你也可以使用内联伸缩，这工作得很好，可能比用CSS修改每个行元素要干净一点。

对于我的项目，我希望每行谁的子元素有边界是相同的高度，这样边界将看起来参差不齐。为此，我创建了一个简单的css类。

.row.borders{display: inline-flex;width: 100%;}
小开

厚脸皮的jquery解决方案，如果有人感兴趣。只要确保你所有的col (el)有一个共同的类名…如果你将它绑定到$(window).resize，也可以响应

function equal_cols(el){var h = 0;$(el).each(function(){$(this).css({'height':'auto'});if($(this).outerHeight() > h){h = $(this).outerHeight();}});$(el).each(function(){$(this).css({'height':h});});}

使用

$(document).ready(function(){equal_cols('.selector');});

注意:这篇文章已经根据@Chris的评论进行了编辑，代码只设置了$.each()函数的最后一个最高高度

小开 
.row.container-height {overflow: hidden;}
.row.container-height>[class*="col-"] {margin-bottom: -99999px;padding-bottom: 99999px;}

其中.container-height是必须添加到.row样式元素中的样式类，该元素的所有.col*子元素都具有相同的高度。

将这些样式仅应用于某些特定的.row(使用.container-height，如示例所示)还可以避免将边缘和填充溢出应用于所有.col*。

小开

如果你想让它在任何浏览器中工作，使用javascript:

$( document ).ready(function() {var heights = $(".panel").map(function() {return $(this).height();}).get(),
maxHeight = Math.max.apply(null, heights);
$(".panel").height(maxHeight);});
小开

不需要JavaScript。只需添加类.row-eq-height到你现有的.row，就像这样:

<div class="row row-eq-height"><div class="col-xs-12 col-sm-4 panel" style="background-color: red">some content</div><div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">kittenz<img src="http://placekitten.com/100/100"></div><div class="col-xs-6 col-sm-4 panel" style="background-color: blue">some more content</div></div>

提示:如果行中有超过12列，引导网格将无法将其包装。所以每12列添加一个新的div.row.row-eq-height。

提示:您可能需要添加

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

到HTML

小开

这是我的解决方案(编译CSS):

.row.row-xs-eq {display: table;table-layout: fixed;margin: 0;}
.row.row-xs-eq::before {content: none;}
.row.row-xs-eq::after {content: none;}
.row.row-xs-eq > [class^='col-'] {display: table-cell;float: none;padding: 0;}
@media (min-width: 768px) {.row.row-sm-eq {display: table;table-layout: fixed;margin: 0;}
.row.row-sm-eq::before {content: none;}
.row.row-sm-eq::after {content: none;}
.row.row-sm-eq > [class^='col-'] {display: table-cell;float: none;padding: 0;}}
@media (min-width: 992px) {.row.row-md-eq {display: table;table-layout: fixed;margin: 0;}
.row.row-md-eq::before {content: none;}
.row.row-md-eq::after {content: none;}
.row.row-md-eq > [class^='col-'] {display: table-cell;float: none;padding: 0;}}
@media (min-width: 1200px) {.row.row-lg-eq {display: table;table-layout: fixed;margin: 0;}
.row.row-lg-eq::before {content: none;}
.row.row-lg-eq::after {content: none;}
.row.row-lg-eq > [class^='col-'] {display: table-cell;float: none;padding: 0;}}

所以你的代码看起来像这样:

<div class="row row-sm-eq"><!-- your old cols definition here --></div>

基本上，这与使用.col-*类的系统是相同的，不同的是，您需要将.row-*类应用于行本身。

.row-sm-eq列将堆叠在XS屏幕上。如果你不需要它们堆叠在任何屏幕上，你可以使用.row-xs-eq。

我们实际使用的SASS版本:

.row {@mixin row-eq-height {display: table;table-layout: fixed;margin: 0;
&::before {content: none;}
&::after {content: none;}
> [class^='col-'] {display: table-cell;float: none;padding: 0;}}
&.row-xs-eq {@include row-eq-height;}
@media (min-width: $screen-sm-min) {&.row-sm-eq {@include row-eq-height;}}
@media (min-width: $screen-md-min) {&.row-md-eq {@include row-eq-height;}}
@media (min-width: $screen-lg-min) {&.row-lg-eq {@include row-eq-height;}}}

现场演示

注意:在一行中混合.col-xs-12和.col-xs-6将无法正常工作。

小开

最好的:

反射-文档

使用Bootstrap工作

更新:

  1. 包含CSS
  2. 更新你的代码:

/*!** Reflex v1.0** Reflex is a flexbox grid which provides a way to take advantage of emerging* flexbox support while providing a fall back to inline-block on older browsers** Built by Lee Jordan G.C.S.E.* email: ldjordan@gmail.com* github: https://github.com/leejordan** Structure and calculations are inspired by twitter bootstrap**/
.reflex-order-12 {-webkit-order: 12;-ms-flex-order: 12;order: 12;}
.reflex-order-11 {-webkit-order: 11;-ms-flex-order: 11;order: 11;}
.reflex-order-10 {-webkit-order: 10;-ms-flex-order: 10;order: 10;}
.reflex-order-9 {-webkit-order: 9;-ms-flex-order: 9;order: 9;}
.reflex-order-8 {-webkit-order: 8;-ms-flex-order: 8;order: 8;}
.reflex-order-7 {-webkit-order: 7;-ms-flex-order: 7;order: 7;}
.reflex-order-6 {-webkit-order: 6;-ms-flex-order: 6;order: 6;}
.reflex-order-5 {-webkit-order: 5;-ms-flex-order: 5;order: 5;}
.reflex-order-4 {-webkit-order: 4;-ms-flex-order: 4;order: 4;}
.reflex-order-3 {-webkit-order: 3;-ms-flex-order: 3;order: 3;}
.reflex-order-2 {-webkit-order: 2;-ms-flex-order: 2;order: 2;}
.reflex-order-1 {-webkit-order: 1;-ms-flex-order: 1;order: 1;}
.reflex-order-0 {-webkit-order: 0;-ms-flex-order: 0;order: 0;}
.reflex-container {display: inline-block;display: -webkit-flex;display: flex;zoom: 1;*display: inline;margin: 0;padding: 0;position: relative;width: 100%;letter-spacing: -0.31em;*letter-spacing: normal;word-spacing: -0.43em;list-style-type: none;}
.reflex-container *,.reflex-container:before,.reflex-container:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;max-width: 100%;letter-spacing: normal;word-spacing: normal;white-space: normal;}
.reflex-container *:before,.reflex-container *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
[class*="reflex-col-"] {width: 100%;vertical-align: top;position: relative;display: inline-block;display: -webkit-flex;display: flex;zoom: 1;*display: inline;text-align: left;text-align: start;}
.reflex-item {display: block;display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-flex: 1 1 auto;flex: 1 1 auto;}
_:-ms-fullscreen,:root .reflex-item {width: 100%;}
.reflex-col-12 {width: 100%;*width: 99.9%;}
.reflex-col-11 {width: 91.66666666666666%;*width: 91.56666666666666%;}
.reflex-col-10 {width: 83.33333333333334%;*width: 83.23333333333335%;}
.reflex-col-9 {width: 75%;*width: 74.9%;}
.reflex-col-8 {width: 66.66666666666666%;*width: 66.56666666666666%;}
.reflex-col-7 {width: 58.333333333333336%;*width: 58.233333333333334%;}
.reflex-col-6 {width: 50%;*width: 49.9%;}
.reflex-col-5 {width: 41.66666666666667%;*width: 41.56666666666667%;}
.reflex-col-4 {width: 33.33333333333333%;*width: 33.23333333333333%;}
.reflex-col-3 {width: 25%;*width: 24.9%;}
.reflex-col-2 {width: 16.666666666666664%;*width: 16.566666666666663%;}
.reflex-col-1 {width: 8.333333333333332%;*width: 8.233333333333333%;}
@media (min-width: 480px) {.reflex-col-xs-12 {width: 100%;*width: 99.9%;}.reflex-col-xs-11 {width: 91.66666666666666%;*width: 91.56666666666666%;}.reflex-col-xs-10 {width: 83.33333333333334%;*width: 83.23333333333335%;}.reflex-col-xs-9 {width: 75%;*width: 74.9%;}.reflex-col-xs-8 {width: 66.66666666666666%;*width: 66.56666666666666%;}.reflex-col-xs-7 {width: 58.333333333333336%;*width: 58.233333333333334%;}.reflex-col-xs-6 {width: 50%;*width: 49.9%;}.reflex-col-xs-5 {width: 41.66666666666667%;*width: 41.56666666666667%;}.reflex-col-xs-4 {width: 33.33333333333333%;*width: 33.23333333333333%;}.reflex-col-xs-3 {width: 25%;*width: 24.9%;}.reflex-col-xs-2 {width: 16.666666666666664%;*width: 16.566666666666663%;}.reflex-col-xs-1 {width: 8.333333333333332%;*width: 8.233333333333333%;}}
@media (min-width: 768px) {.reflex-col-sm-12 {width: 100%;*width: 99.9%;}.reflex-col-sm-11 {width: 91.66666666666666%;*width: 91.56666666666666%;}.reflex-col-sm-10 {width: 83.33333333333334%;*width: 83.23333333333335%;}.reflex-col-sm-9 {width: 75%;*width: 74.9%;}.reflex-col-sm-8 {width: 66.66666666666666%;*width: 66.56666666666666%;}.reflex-col-sm-7 {width: 58.333333333333336%;*width: 58.233333333333334%;}.reflex-col-sm-6 {width: 50%;*width: 49.9%;}.reflex-col-sm-5 {width: 41.66666666666667%;*width: 41.56666666666667%;}.reflex-col-sm-4 {width: 33.33333333333333%;*width: 33.23333333333333%;}.reflex-col-sm-3 {width: 25%;*width: 24.9%;}.reflex-col-sm-2 {width: 16.666666666666664%;*width: 16.566666666666663%;}.reflex-col-sm-1 {width: 8.333333333333332%;*width: 8.233333333333333%;}}
@media (min-width: 992px) {.reflex-col-md-12 {width: 100%;*width: 99.9%;}.reflex-col-md-11 {width: 91.66666666666666%;*width: 91.56666666666666%;}.reflex-col-md-10 {width: 83.33333333333334%;*width: 83.23333333333335%;}.reflex-col-md-9 {width: 75%;*width: 74.9%;}.reflex-col-md-8 {width: 66.66666666666666%;*width: 66.56666666666666%;}.reflex-col-md-7 {width: 58.333333333333336%;*width: 58.233333333333334%;}.reflex-col-md-6 {width: 50%;*width: 49.9%;}.reflex-col-md-5 {width: 41.66666666666667%;*width: 41.56666666666667%;}.reflex-col-md-4 {width: 33.33333333333333%;*width: 33.23333333333333%;}.reflex-col-md-3 {width: 25%;*width: 24.9%;}.reflex-col-md-2 {width: 16.666666666666664%;*width: 16.566666666666663%;}.reflex-col-md-1 {width: 8.333333333333332%;*width: 8.233333333333333%;}}
@media (min-width: 1200px) {.reflex-col-lg-12 {width: 100%;*width: 99.9%;}.reflex-col-lg-11 {width: 91.66666666666666%;*width: 91.56666666666666%;}.reflex-col-lg-10 {width: 83.33333333333334%;*width: 83.23333333333335%;}.reflex-col-lg-9 {width: 75%;*width: 74.9%;}.reflex-col-lg-8 {width: 66.66666666666666%;*width: 66.56666666666666%;}.reflex-col-lg-7 {width: 58.333333333333336%;*width: 58.233333333333334%;}.reflex-col-lg-6 {width: 50%;*width: 49.9%;}.reflex-col-lg-5 {width: 41.66666666666667%;*width: 41.56666666666667%;}.reflex-col-lg-4 {width: 33.33333333333333%;*width: 33.23333333333333%;}.reflex-col-lg-3 {width: 25%;*width: 24.9%;}.reflex-col-lg-2 {width: 16.666666666666664%;*width: 16.566666666666663%;}.reflex-col-lg-1 {width: 8.333333333333332%;*width: 8.233333333333333%;}}
.reflex-wrap {-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.reflex-wrap-reverse {-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}
.reflex-direction-row-reverse {-webkit-flex-direction: row-reverse;flex-direction: row-reverse;}
.reflex-direction-column {-webkit-flex-direction: column;flex-direction: column;}
.reflex-direction-column-reverse {-webkit-flex-direction: column-reverse;flex-direction: column-reverse;}
.reflex-align-start {-webkit-align-items: flex-start;align-items: flex-start;}
.reflex-align-end {-webkit-align-items: flex-end;align-items: flex-end;}
.reflex-align-end [class*="reflex-col-"] {vertical-align: bottom;}
.reflex-align-center {-webkit-align-items: center;align-items: center;}
.reflex-align-center [class*="reflex-col-"] {vertical-align: middle;}
.reflex-align-baseline {-webkit-align-items: baseline;align-items: baseline;}
.reflex-align-baseline [class*="reflex-col-"] {vertical-align: baseline;}
.reflex-align-content-start {-webkit-align-content: flex-start;align-content: flex-start;}
.reflex-align-content-end {-webkit-align-content: flex-end;align-content: flex-end;}
.reflex-align-content-end [class*="reflex-col-"] {vertical-align: bottom;}
.reflex-align-content-center {-webkit-align-content: center;align-content: center;}
.reflex-align-content-space-between {-webkit-align-content: space-between;align-content: space-between;}
.reflex-align-content-space-around {-webkit-align-content: space-around;align-content: space-around;}
.reflex-align-self-stretch {-webkit-align-self: stretch;align-self: stretch;}
.reflex-align-self-start {-webkit-align-self: flex-start;align-self: flex-start;}
.reflex-align-self-end {-webkit-align-self: flex-end;align-self: flex-end;vertical-align: bottom;}
.reflex-align-self-center {-webkit-align-self: center;align-self: center;vertical-align: middle;}
.reflex-align-self-baseline {-webkit-align-self: baseline;align-self: baseline;vertical-align: baseline;}
.reflex-justify-start {text-align: left;-webkit-justify-content: flex-start;justify-content: flex-start;}
.reflex-justify-end {text-align: right;-webkit-justify-content: flex-end;justify-content: flex-end;}
.reflex-justify-center {text-align: center;-webkit-justify-content: center;justify-content: center;}
.reflex-justify-space-between {text-align: justify;-moz-text-align-last: justify;text-align-last: justify;-webkit-justify-content: space-between;justify-content: space-between;}
.reflex-justify-space-around {text-align: justify;-moz-text-align-last: justify;text-align-last: justify;-webkit-justify-content: space-around;justify-content: space-around;}
.reflex-item-margin-sm {margin: 0 0.25em 0.5em;}
.reflex-item-margin-md {margin: 0 0.5em 1em;}
.reflex-item-margin-lg {margin: 0 1em 2em;}
.reflex-item-content-margin-sm * {margin-right: 0.25em;margin-left: 0.25em;}
.reflex-item-content-margin-md * {margin-right: 0.5em;margin-left: 0.25em;}
.reflex-item-content-margin-lg * {margin-right: 1em;margin-left: 1em;}
.reflex-img {display: inline-block;display: -webkit-flex;display: flex;zoom: 1;*display: inline;-webkit-flex: 0 0 auto;flex: 0 0 auto;margin-left: 0;margin-right: 0;max-width: 100%;width: 100%;height: auto;}
.reflex-item-footer {margin-top: auto;margin-left: 0;margin-right: 0;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="reflex-container reflex-wrap"><div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">some content</div><div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">kittenz<img src="https://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg"></div><div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">some more content</div></div>

小开

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

.
<div class="row"><div class="col-xs-6">Some content</div><div class="col-xs-6">Lots of content! Lots of content! Lots of content! Lots of content! Lots of content!</div><div id="spacer-div" class="col-xs-12"></div><div class="col-xs-6">More content...</div></div><!--this You forgot to close -->

希望这能有所帮助!

小开

这里有很多CSS…

jQuery

$(document).ready(function() {
// Get height of original column you want to matchvar box-height = $('.panel:nth-child(1)').outerHeight();
// Output same height on particular element or element(s)$('.panel').height(box-height);
});

非常简单的代码，不需要玩css，尽管上面所有的选项都是完全可用的。

Jsfiddle

小开 
@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%，这取决于你如何衡量，对于许多企业用户来说，情况要糟糕得多。# 0

display: table， display: table-cell的技巧是向后兼容的-一个很棒的事情是唯一严重的兼容性问题是Safari的问题，它强制box-sizing: border-box，这已经应用到你的Bootstrap标签上了。# 3

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

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

小开

之前的一些答案解释了如何使div具有相同的高度，但问题是，当宽度太窄时，div不会堆叠，因此你可以实现他们的答案与一个额外的部分。对于每一个，你可以使用这里给出的CSS名称，除了你使用的行类，所以如果你总是想让div彼此相邻，div应该是这样的:

<div class="row row-eq-height-xs">Your Content Here</div>

对于所有屏幕:

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

当你想使用sm时:

.row-eq-height-sm {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display:         flex;flex-direction: column;}@media (min-width:768px) {.row-eq-height-sm {flex-direction: row;}}

当你想要md时:

.row-eq-height-md {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display:         flex;flex-direction: column;}@media (min-width:992px) {.row-eq-height-md {flex-direction: row;}}

当你想使用lg时:

.row-eq-height-lg {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display:         flex;flex-direction: column;}@media (min-width:1200px) {.row-eq-height-md {flex-direction: row;}}

<强>编辑根据注释，确实有一个更简单的解决方案，但你需要确保从所有尺寸的最大所需宽度到xs(例如<div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-direction: row;flex-wrap: wrap;}
小开

在只对行中的列应用解决方案1时，会出现一个问题。想改进解决方案1。

 [class^="col-"]:not([class*="-12"]){margin-bottom: -99999px;padding-bottom: 99999px;}

(抱歉，不能评论Popnoodles的回答。我的名声不够好)

小开

要回答你的问题，你需要的就是看到完整的响应演示与前缀css:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {.flex-row {display: flex;flex-wrap: wrap;}.flex-row > [class*='col-'] {display: flex;flex-direction: column;}.flex-row.row:after,.flex-row.row:before {display: flex;}}

< a href = " https://codepen。io/bootstrap /pen/RrabNe" rel="noreferrer">截图of Codepen . io/bootstrap /pen/RrabNe" rel="noreferrer">.flex-row .thumbnail,.flex-row .caption {display: flex;flex: 1 0 auto;flex-direction: column;}.flex-text {flex-grow: 1;}.flex-row img {width: 100%;}

虽然flexbox不能在IE9及以下版本中工作，但你可以使用带回退的演示，使用条件标签和javascript网格之类的东西作为填充:

<!--[if lte IE 9]>
<![endif]-->

至于公认答案中的另外两个例子……表格演示是一个不错的想法，但实现错误。在引导列类上应用CSS无疑会完全破坏网格框架。您应该使用一个自定义选择器和两个表样式不应该应用于[class*='col-']，已定义宽度。只有当你想要等高等宽的列时，才应该使用这个方法。它不是为任何其他布局，不是响应。我们可以让它在手机屏幕上后退……

<div class="table-row-equal"><div class="thumbnail">Content...</div><div class="thumbnail">Content...</div></div>
@media only screen and (min-width : 480px){.table-row-equal {display: table;width: 100%;table-layout: fixed;border-spacing: 30px 0px;word-wrap: break-word;}.table-row-equal .thumbnail {float: none;display: table-cell;vertical-align: top;width: 1%;}}

最后，接受的答案中的第一个演示实现了一个真实的布局的一个版本，在某些情况下是一个不错的选择，但不适合用于引导列。这样做的原因是所有列都扩展到容器高度。因此，这也会破坏响应性，因为列并没有扩展到它们旁边的元素，而是扩展到整个容器。此方法也不允许您再对行应用下边距，并且还会导致其他问题，如滚动到锚标记。

有关完整的代码，请参阅自动添加flexbox代码前缀的Codepen。

小开

这是我的方法，我已经使用flex与一些变化的媒体查询。

  @media (min-width: 0px) and (max-width: 767px) {.fsi-row-xs-level {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}}@media (min-width: 768px) and (max-width: 991px) {.fsi-row-sm-level {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}}@media (min-width: 992px) and (max-width: 1199px) {.fsi-row-md-level {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}}@media (min-width: 1200px) {.fsi-row-lg-level {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}}

然后将所需的类添加到父类中。

<div class="row fsi-row-lg-level fsi-row-md-level"><div class="col-sm-4">column 1</div><div class="col-sm-4">column 2</div><div class="col-sm-4">column 3</div></div>

我使用响应式断点，因为流量通常会阻碍引导标准响应特性。

小开

我知道我来晚了，但是现在您可以使用“min-height”样式属性来达到您的目的。

小开

对于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; ?>
小开

只是通过检查引导文档，我发现了列相同高度问题的简单解决方案。

仅为所需的视口添加额外的clearfix

<div class="clearfix visible-xs-block"></div>

例如:

<div class="col-md-3 col-xs-6">This is a long text</div><div class="col-md-3 col-xs-6">This is short</div><div class="clearfix visible-xs-block">This is a long text</div><div class="col-md-3 col-xs-6">Short</div><div class="col-md-3 col-xs-6">Long Text</div><div class="clearfix visible-xs-block"></div><div class="col-md-3 col-xs-6">Longer text which will push down</div><div class="col-md-3 col-xs-6">Short</div>

请参考http://getbootstrap.com/css/#grid-responsive-resets

小开

对于那些寻找一个快速，简单的解决方案-如果你有一个相对一致的块内容集，在div上设置一个最小高度，比最大的块大一点，可以更容易实现。

.align-box {min-height: 400px;}
小开

您可以使用下面的代码

var heights = $(".row > div").map(function() {return $(this).height();}).get(),maxHeight = Math.max.apply(null, heights);$(".row > div").height(maxHeight);
小开 
.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

小开

您可以将列包装在div中

<div class="row"><div class="col-md-12><div class="col-xs-12 col-sm-4 panel" style="background-color: red">some content</div><div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">kittenz<img src="http://placekitten.com/100/100"></div><div class="col-xs-6 col-sm-4 panel" style="background-color: blue">some more content</div></div></div>
小开

我尝试了在这个帖子和其他页面上提出的很多建议，但没有一个解决方案在所有浏览器中都100%有效。

所以我尝试了很长时间，然后想出了这个。在flexbox 只有一节课。 这适用于所有主流浏览器IE10+。的帮助下，Bootstrap等高列的完整解决方案

CSS:

.row.equal-cols {display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.row.equal-cols:before,.row.equal-cols:after {display: block;}
.row.equal-cols > [class*='col-'] {display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.row.equal-cols > [class*='col-'] > * {-webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;}

HTML:

<div class="container"><div class="row equal-cols"><div class="col-sm-4"><div class="content"></div></div><div class="col-sm-4"><div class="content"></div></div><div class="col-sm-4"><div class="content"></div></div></div></div>

为了支持更多版本的IE，你可以，例如，使用https://github.com/liabru/jquery-match-height并瞄准.equal-cols的所有子列。是这样的:

// Create a check for IE9 (or any other specific browser).if(IE9) {$(".row.equal-cols > [class*='col-']").matchHeight();}

没有这个填充列将表现为通常引导列，所以这是一个相当好的退一步。

小开

试着用弹性盒来做

.container {display: flex;padding-bottom: 50px;}.col {background: blue;padding: 30px;}
.col.center {background: red;height: 100px;margin-bottom: -50px;}
<div class="container"><div class="col">Left</div><div class="col center">Center</div><div class="col">Right</div></div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

小开

如果有人使用bootstrap 4并寻找等高列，只需使用row-eq-height来父div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /><div class="row row-eq-height"><div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div><div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div><div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div></div>

裁判:# 0

小开

超文本标记语言

<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()});
小开
我寻找了一个解决同样问题的方法，发现一个方法很有效!!-几乎没有额外的代码..

参见https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27对于一个好的disuccuion，和你想要的回应在底部，与链接。

https://www.codeply.com/go/EskIjvun4B

这对我来说是正确的回应方式…引用:.．.3 -使用flexbox(最好!)

截至2017年，在响应式设计中制作等高列的最佳(也是最简单)方法是使用CSS3 flexbox。

.row.display-flex {display: flex;flex-wrap: wrap;}.row.display-flex > [class*='col-'] {display: flex;flex-direction: column;}

简单地使用:

div class="container"><div class="row display-flex .... etc..
小开

我很惊讶我在2018年底找不到一个有价值的解决方案。我继续前进，并找出了一个Bootstrap 3解决方案自己使用flexbox。

简单明了的例子:

Bootstrap 3中匹配列宽度的示例

超文本标记语言

<div class="row row-equal"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal"><p>Text</p></div><div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal"><img src="//placehold.it/200x200"></div><div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal"><p>Text</p></div></div>

CSS

img {width: 100%;}p {padding: 2em;}@media (min-width: 768px) {.row-equal {display: flex;flex-wrap: wrap;}.col-equal {margin: auto;}}

查看工作演示:http://jsfiddle.net/5kmtfrny/

小开

所以，是的，Bootstrap 4确实使一行中所有的cols高度相等，然而，如果你在一行内的内容周围创建边框，你可能会发现它看起来像cols不等高!

当我对col内的元素应用height: 100%时，我发现我失去了边框。

我的解决方案是在col的div上使用填充(而不是在内部元素上使用边缘)。像这样:

<div class="container"><div class="row"><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div><div class="col-lg-4 col-md-6 col-12 py-4"><div class="h-100 border round">...</div></div></div></div>

上面的代码示例使用Bootstrap 4.1创建一组带有边框的9个方框

小开

03/19/2019

**Bootstrap 4等高解决方案**

Bootstrap Utilities/flex for equal height

< a href = " https://codepen。io/ashikjs/pen/YgOwzo" rel="nofollow noreferrer"> code中的活例 . io/ashikjs/pen/YgOwzo" rel="nofollow noreferrer"> code中的活例

由父div固定height或min-height的引导类等高

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px"><div>Flex height test text for example , Flex height test text for example </div><div>Flex item</div><div>Flex item</div><div>Flex item</div></div>

.bd-highlight {background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}.fixed-height-200 {min-height: 200px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><br><br><br><div class="d-flex align-content-stretch flex-wrap fixed-height-200"><div class="p-2 bd-highlight">Flex item <br> 1111111111</div><div class="p-2 bd-highlight bg-danger">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight bg-info">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div><div class="p-2 bd-highlight">Flex item <br> 1111111111</div><div class="p-2 bd-highlight">Flex item <br> 1111111111</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight bg-primary">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight">Flex item</div><div class="p-2 bd-highlight">Flex item</div></div>

小开

来自官方文件。也许你可以用在你的案子上。

当你需要等高时，在卡片上加上。h-100。

<div class="row row-cols-1 row-cols-md-3 g-4"><div class="col"><div class="card h-100"><div>.....</div></div><div class="col"><div class="card h-100"><div>.....</div></div>

提交答案