Bootstrap 3 Grid如何使嵌套列的高度与最大的列相同

Posted 2023-03-06

【中文标题】Bootstrap 3 Grid如何使嵌套列的高度与最大的列相同

【英文标题】：Bootstrap 3 Grid how to make nested columns all the same height as the largest

【发布时间】：2018-02-27 00:06:20

【问题描述】：

我正在尝试使用 bootstrap 3 来确保页面上所有列的高度相同。

当我有 3 列时，我可以让它工作，就像这里的例子一样： How can I make Bootstrap columns all the same height?

我遇到的问题是我想要嵌套列，这些嵌套列需要 x%，每个列等于最大父列高度的 100%。我似乎找不到嵌套列的解决方案。

所以我需要嵌套列填充其父列，具体取决于提供给嵌套列 css 的高度百分比。

css 高度百分比将通过 jquery .css() 提供

.row 
    display: table;


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


<div class="container">
<div class="row">
  <div class="col-sm-3 ">
    <img src="http://placehold.it/250x450">
  </div>
  <div class="col-sm-3 " style="background-color: grey">
    <div class="row">
      <div class="col-sm-12 " style="background-color: green">30%</div>
    </div>
    <div class="row">
      <div class="col-sm-12 " style="background-color: blue">20%</div>
    </div>
    <div class="row">
      <div class="col-sm-12 " style="background-color: red">50%</div>
    </div>
  </div>
  <div class="col-sm-3 " style="background-color: grey">
    <div class="row">
      <div class="col-xs-12 " style="background-color: green">25%</div>
    </div>
    <div class="row">
      <div class="col-xs-12 " style="background-color: orange">75%</div>
    </div>
  </div>
  <div class="col-sm-3 " style="background-color: blue">
    100%
  </div>
</div>

【参考方案1】：

请向父级尝试“display: flex;”属性。

【讨论】：

显示 flex 对宽度有帮助，但对高度没有帮助。

这里是codepen中“Flex”属性的简单演示。 codepen.io/satheesh_design/pen/qPbdKV

感谢您的示例，但我要解决的问题是当列具有嵌套列时。

我已经用嵌套列的一层更新了我的 codepen 链接。请看一下。

【参考方案2】：

@Satheesh Kumar 感谢您为我指明了正确的方向。 Flex 绝对是我想要的。这是我想要实现的目标的链接。

https://codepen.io/anon/pen/XeXXpQ

<div class="equal-height-container">
    <div class="first">
      <img src="http://placehold.it/250x450">
    </div>

    <div class="second">
      <div class="second-a">A</div>
      <div class="second-b">B</div>
      <div class="second-c">C</div>
    </div>
    <div class="third">

    </div>
  </div>



    .equal-height-container 
          max-width: 900px;
          margin: 0 auto;
          display: flex;
        
    .first 
      background-color: #FFF;
      padding: 20px;
      flex: 1;
    

    .second 
      background-color: yellow;
      flex: 2;
      display: flex;
      flex-direction: column;
    

    .third 
      background-color: yellow;
      padding: 20px;
      flex: 2;
    
    .second-a 
      background-color: #c0dbe2;
      flex: 2.5;
    

    .second-b 
      background-color: #cdf1c3;
      flex: 1;
    

    .second-c 
      background-color: red;
      flex: 1;