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


当前回答

试着用弹性盒来做

.container { 显示:flex; padding-bottom: 50 px; } .col { 背景:蓝色; 填充:30 px; } .col。中心{ 背景:红色; 身高:100 px; margin-bottom: -50 px; } < div class = "容器" > < div class = "坳“> < / div > <div class="col center"> center </div> . < div class = "坳“> < / div > < / div >

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

其他回答

试着用弹性盒来做

.container { 显示:flex; padding-bottom: 50 px; } .col { 背景:蓝色; 填充:30 px; } .col。中心{ 背景:红色; 身高:100 px; margin-bottom: -50 px; } < div class = "容器" > < div class = "坳“> < / div > <div class="col center"> center </div> . < div class = "坳“> < / div > < / div >

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

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

仅为所需的视口添加额外的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

.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

我寻找了一个解决同样问题的方法,发现一个方法很有效!!- 几乎没有额外的代码..

参见https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 为了更好的讨论,你想要的答案在底部,有一个链接。

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..

最好的:

反射-文件

使用Bootstrap工作

更新:

包含CSS 更新你的代码:

/*! * * 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>