Bootstrap + Flexbox 动态高度

Question

我已经为 bootstrap 中的 flex-box 添加了这个 css 到我的网站：http://www.bootply.com/126437

问题如下：它对我的 row-flex row-flex-wrap 容器中的两个 <sections> 都有效（这些部分具有相同的高度）但是第二部分中的内容不会延伸到它的最大父级身高.

<div class="row row-flex row-flex-wrap">
 <section class="col-md-8">
  ... some content
 </section>
 <section class="col-md-4">
  <h1>Welcome</h1>
  <div class="modcon green">
   ... some more content with green background but the background doesn't stretch to it's maximum height, even if i add "flex-grow" class to the section or the modcon-container.
  </div>
 </section>
</div>

http://www.bootply.com/lbDqiEzhGD

Answer 1

如果你想让你的黄色 div 随着 flex 增长，请确保它的父级实际上是一个 flex-direction: column 的 flex-box。

将 flex-col class 添加到您的 <section class="col-md-8"> 中，您可以使用 flex。

Demo

Answer 2

下面是您应该使用的代码。看起来很多，但 flexbox 相对较新，您需要供应商前缀。

已修改 Bootply 示例

        /* flexbox styles */
    .flex-row.row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    .flex-row.row > [class*='col-'] {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    /* mobile fallback when col-xs-* is not specified */
    @media only screen and (max-width : 768px) {
        .flex-row.row > [class*="col-sm-"]:not([class*="col-xs-"]) {
         width: 100%;
        }
    }
    /* inner flex */
    .flex-row .flex-grow {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }

    /* optional to center paragraphs - add flex-justify to flex-grow class */
    .flex-grow.flex-justify {
       justify-content: center;
    }

    /* demo styles */
    h1 {
      font-size: 30px;
    }
    .modcon-yellow {
      background-color: yellow;
    }
    .modcon-green {
      background-color: green;
    }

<!-- Bootstrap 3.3.6 -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row flex-row">
    <section class="col-xs-8">
      <h2>News</h2>
      <div class="modcon-yellow flex-grow">
        <p>... some content but yellow background doesn't stretch.</p>
      </div>
    </section>
    <section class="col-xs-4">
      <h1>Welcome</h1>
      <div class="modcon-green">
        <p>... some more content with green background but the background (yellow) doesn't stretch to it's maximum height, even if i add "flex-grow" class to the section or the modcon-container.</p>
      </div>
    </section>
  </div>
</div>

如果您想要一个使用所有 bootstrap 元素的更完整示例 check out this example.

Bootstrap + Flexbox 动态高度

Bootstrap + Flexbox dynamic height

html

css

flexbox

twitter-bootstrap

twitter-bootstrap-3

已修改 Bootply 示例