html - Bootstrap + Flexbox 动态高度

标签 html css twitter-bootstrap twitter-bootstrap-3 flexbox

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

问题如下:它适用于<sections>。在我的 row-flex row-flex-wrap容器(这些部分具有相同的高度)，但第二部分中的内容不会拉伸(stretch)到它的最大父高度。

<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

最佳答案

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

添加 flex-col给你上课 <section class="col-md-8">比你可以使用 flex。

Demo

关于html - Bootstrap + Flexbox 动态高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34061717/