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

我正在使用Bootstrap。如何让三根柱子都一样高呢?

下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。

代码如下:

当前回答

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

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

2015-02-26 21:03:22

其他回答

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

简单明了的例子:

HTML

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

2018-11-07 20:18:14

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

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

2015-02-26 21:03:22

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

2013-11-19 17:47:55

最新解决方案(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;
}

使用flex的解决方案3于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;
}

2013-10-30 23:38:05

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

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

2018-04-04 15:01:40

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

推荐文章

最新文章

标签