CSS 如何使 Bootstrap 列的高度相同？

Question

提问by Richard

I'm using 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.

这是问题的屏幕截图。我希望蓝色和红色列与黄色列的高度相同。

Three bootstrap columns with the center column longer than the other two columns

三个 bootstrap 列，其中中心列长于其他两列

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>

Answer 1

回答by Popnoodles

Solution 4 using Bootstrap 4

使用 Bootstrap 4 的解决方案 4

Bootstrap 4 uses Flexbox so there is no need for extra CSS.

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

Solution 1 using negative margins (doesn't break responsiveness)

使用负边距的解决方案 1（不会破坏响应能力）

Demo

演示

.row{
    overflow: hidden; 
}

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

Solution 2 using table

使用表的解决方案2

Demo

演示

.row {
    display: table;
}

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

Solution 3 using flexadded August 2015. Comments posted before this don't apply to this solution.

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

Answer 2

回答by Zim

Update 2020

2020 年更新

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. For example, here is sm(768px) and up:

要仅在特定断点（响应式）应用相同高度的 flexbox，请使用媒体查询。例如，这里是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 ideafor 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 tabledisplay 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

Flexbox 现在在 Bootstrap 4 中默认使用，因此不需要额外的 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>

Answer 3

回答by Kevin R.

No JavaScript needed. Just add the class .row-eq-heightto your existing .rowjust like this:

不需要 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>

Tip: if you have more than 12 columns in your row, the bootstrap grid will fail to wrap it. So add a new div.row.row-eq-heighteach 12 columns.

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

Tip: you may need to add

提示：您可能需要添加

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

to your html

到你的 html

Answer 4

回答by Bryan Willis

To answer your question this is all you need see full responsive demo with prefixed css:

要回答您的问题，您只需要查看带有前缀 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;
    }
}

To add support for thumbnail content flex within flex columns like the screenshot above also add this... Note you could do this with panels as well:

要像上面的屏幕截图一样在 flex 列中添加对缩略图内容 flex 的支持，还要添加这个...注意你也可以用面板来做到这一点：

.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%;
}

While flexbox doesn't work in IE9 and below you can use the demo with a fallback using conditional tags with something like javascript gridsas a polyfill:

虽然 flexbox 在 IE9 及以下版本中不起作用，但您可以使用带有回退的演示，使用条件标签，将javascript 网格之类的东西作为 polyfill：

<!--[if lte IE 9]>

<![endif]-->

As for the other two examples in the accepted answer... The table demo is a decent idea but is being implemented wrong. Applying that CSS on bootstrap column classes specifically will without a doubt break the grid framework entirely. You should be using a custom selector for one and two the tables styles should not be applied to [class*='col-']that have defined widths. This method should ONLY be used if you want equal height AND equal width columns. It is not meant for any other layouts and is NOT responsive. We can make it fallback however on mobile displays...

至于已接受答案中的其他两个示例......表格演示是一个不错的主意，但正在实施错误。毫无疑问，在引导列类上专门应用该 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%;
    }
}

Lastly, the first demo in the accepted answer which implements a version of the one true layoutis a good choice for some situations, but not suitable for bootstrap columns. The reason for this is that all the columns expand to the container height. So this will also break responsiveness since the columns are not expanding to the elements next to them, but the entire container. This method will also not allow you to apply bottom margins to rows any longer and will also cause other issues along the way like scrolling to anchor tags.

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

For the complete code see the Codepen which automatically prefixes the flexbox code.

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

Answer 5

回答by globalSchmidt

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

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

Answer 6

回答by paulalexandru

If you want to make this work in any browser, use javascript:

如果您想在任何浏览器中使用此功能，请使用 javascript：

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

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

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

Answer 7

回答by Adam Lindqvist

I tried alot of the suggestions made in this thread and on other pages but no solution worked 100% in every browsers.

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

So I experimented quite some time and came up with this. A complete solution for Bootstrap Equal Height columnswith the help of flexbox with only 1 class.This works in all major browsers IE10+.

所以我尝试了很长时间并想出了这个。在只有 1 个类的 flexbox 的帮助下，Bootstrap Equal Height 列的完整解决方案。这适用于所有主要浏览器 IE10+。

CSS:

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:

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>

To support even more versions of IE you can, for example, use https://github.com/liabru/jquery-match-heightand target all child columns of .equal-cols. Like this:

例如，要支持更多版本的 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();
}

Without this polyfill the columns will behave as usual Bootstrap columns so which is a quite good fallback.

如果没有这个 polyfill，列的行为会像通常的 Bootstrap 列一样，所以这是一个很好的后备。

Answer 8

回答by eaglei22

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

From:

从：

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Answer 9

回答by Steffan Perry

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%;
}

Answer 10

回答by Marty

cheeky jquery solution if anyone's interested. Just make sure all your cols (el) have a common classname...works responsively too if you bind it to $(window).resize

如果有人感兴趣，可以使用厚脸皮的 jquery 解决方案。只要确保你所有的 cols (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});
    });
}

Usage

用法

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

Note: This post has been edited as per @Chris' comment out that the code was only set the last highest height in the $.each()function

注意：此帖子已根据@Chris 的注释进行编辑，代码仅设置为$.each()函数中的最后一个最高高度

CSS 如何使 Bootstrap 列的高度相同？

提问by Richard

回答by Popnoodles

回答by Zim

Update 2020

2020 年更新

Bootstrap 4

引导程序 4

回答by Kevin R.

回答by Bryan Willis

回答by globalSchmidt

回答by paulalexandru

回答by Adam Lindqvist

回答by eaglei22

回答by Steffan Perry

回答by Marty

Usage

用法

相关推荐

最近更新

标签

CSS 如何使 Bootstrap 列的高度相同？

提问by Richard

回答by Popnoodles

回答by Zim

Update 2020

2020 年更新

Bootstrap 4

引导程序 4

回答by Kevin R.

回答by Bryan Willis

回答by globalSchmidt

回答by paulalexandru

回答by Adam Lindqvist

回答by eaglei22

回答by Steffan Perry

回答by Marty

Usage

用法

相关推荐

CSS：在图像周围创建白光

CSS 是否可以安全地在表行上使用伪元素 (:after, :before)？

CSS 使用css在同一行上的标签和文本框

CSS Twitter Bootstrap 3 - 最大高度，自定义布局

相关推荐

最近更新

标签