Question

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

Answer 1

请尝试＆＃34; display: flex;＆＃34;属于父母的财产。

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

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

2 个答案: