是否可以在 Bootstrap 4 中将“row”-s 放入“d-flex”中？答案

【问题标题】：Is it possible to put "row"-s inside "d-flex" in Bootstrap 4?是否可以在 Bootstrap 4 中将“row”-s 放入“d-flex”中？
【发布时间】：2017-01-24 05:41:47
【问题描述】：

（有一个类似的问题here，但我太菜鸟了，还没有把它翻译到 Bootstrap 上）

我想要的是在页面上的“header”和“footer”之间有一个区域（我们称之为“body”），它可能有一个

一些固定部分，比如BS4“行”，放在最上面，
一些可变内容，由几个 BS“行”组成，并对齐垂直于身体左侧（或身体左侧）的中间本身）

能否以响应式的方式完成，无需 JS（仅使用 Bootstrap 4 CSS）？

我已经尝试了一些东西：

  <body> 
    <div id="root" class="container">
     <div style="height: 100%;">
      <div><h1>HEADER</h1></div><hr>
      <div style="min-height: 60%;">
        <div class="h100">
          <div>some badge</div><br>
          <div>
            <div class="row justify-content-between">
              <div class="col-3">Item #2</div>
              <div class="col-3 text-right">
                <div>some stats</div>
              </div>
            </div>
            <div class="">
              <div class="row justify-content-center">
                <div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
              </div>
              <div class="row justify-content-center">
                <div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
                <div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
              </div>
            </div>
         </div>
        </div>
      </div><hr>
      <div class="footer">FOOTER</div>
     </div>
    </div>
  </body>

(https://jsfiddle.net/f93mhdbr/) 但只要我将“d-flex”添加到“body”div 或其任何子元素上，之前所有基于“row”/“col”的布局都会变得一团糟！（见https://jsfiddle.net/f93mhdbr/2/）

我怀疑这是由于 Bootstrap 本身对列和行使用 Flexbox，但也许存在任何解决方案？

我会努力改进这个问题，我知道它很差，但我现在太绝望了，无法解决所有问题......

更新：添加了指向我试图复制的任何内容的链接

【问题讨论】：

发布您正在寻找的布局的最小代码sn-p，我们将尝试使其工作
@LGSon 我试过这样做。

标签： css flexbox twitter-bootstrap-4

【解决方案1】：

您需要使用flex property 来实现它。在此处使用flex-grow 将使您的变量元素增长并填充其容器的剩余高度（如果有的话）。然后剩下要做的就是在元素上设置align-items-center 以使其在x 轴上对齐。

Here is the Fiddle

请注意，我添加了背景颜色，以便您更轻松地查看每个元素使用了多少空间，或者使用检查器。

您可以为header、footer 和content-top 设置任何固定高度。 content 和 content-remaining 的高度会自适应地调整，因为它们设置了 flex-grow: 1 属性。 Here's an example.

进一步解释，因为容器wrap 有一个min-height: 100-vh，所以content 元素将相对于wrap 容器内的其余灵活项填充整个视口。同样的逻辑也适用于content-remaining，唯一的区别是它的父元素是content 元素而不是wrap 容器。

最后，我为弹性项目上的min-height 属性添加了IE 修复程序。 It's a known bug 一个快速可靠的解决方法是将其包装在一个单独的 flex 容器中。

希望这对您有所帮助，如果您有任何疑问，请在此答案中发表评论。

【讨论】：

似乎我表达得不够有力 - 我试图实现的是让 几条 BS4 行 在一个整体内对齐（垂直居中） “弹性”容器。然而，我对此想得越多，就越明显这是不可能的，因为“行”本身是基于弹性盒的，而且感觉好像你不能嵌入弹性盒。但我没有专业知识可以肯定地回答。非常感谢您的努力！