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


当前回答

03/19/2019

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

Bootstrap实用工具/flex为相等的高度

活生生的例子在Codepen

由父div固定高度或最小高度的引导类等高

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

其他回答

这是我的方法,我已经使用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>

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

@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%,这取决于你如何衡量,对于许多企业用户来说,情况要糟糕得多。http://caniuse.com/#feat=flexbox

display: table, display: table-cell的技巧是向后兼容的,一个很棒的事情是唯一严重的兼容性问题是Safari的问题,它强制box-sizing: border-box,这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table

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

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

最好的:

反射-文件

使用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>

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

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

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

所以我做了很长时间的实验,得出了这个结论。 一个完整的解决方案,Bootstrap等高列与flexbox的帮助下,只有一个类。这适用于所有主流浏览器IE10+。

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();
}

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