(有一个类似的问题 here ，但我还是个菜鸟，无法将其转化为 Bootstrap)
我想要的是在“header”和“footer”之间的页面上有一个区域(我们称之为“body”)，它可能有一个
一些固定部分，如 BS4“行”，放在顶部，
一些可变内容，由多个 BS“行”组成，并对齐 垂直于 body 剩余部分(或 body 的中间部分) 本身)
它能以响应式的方式完成，并且没有 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， 但也许存在任何解决方案？
我会努力改进这个问题，我知道它很差，但我现在太绝望了，无法全力以赴...
更新:添加了指向我试图复制的任何内容的链接
最佳答案
您需要使用 flex property实现它。在此处使用 flex-grow 将使您的可变元素增长并填充其容器的剩余高度(如果有的话)。然后剩下要做的就是在元素上设置 align-items-center 以使其在 x 轴上对齐。
请注意，我添加了背景色，这样您可以更轻松地查看每个元素使用了多少空间，或者使用检查器。
您可以为header、footer 和content-top 设置任何固定高度。 content 和 content-remaining 的高度会自适应调整，因为它们设置了属性 flex-grow: 1。 Here's an example .
进一步解释，因为容器 wrap 有一个 min-height: 100-vh，content 元素将增长以填充整个视口(viewport)相对于 wrap 容器内的其余灵活元素。同样的逻辑适用于 content-remaining，唯一的区别是它的父级是 content 元素而不是 wrap 容器。
最后，我为 flex-items 的 min-height 属性添加了 IE 修复。 It's a known bug一个快速可靠的解决方法是将它包装在一个单独的 flex 容器中。
希望这对您有所帮助，如果您有任何疑问，请评论此答案。
关于css - 是否可以在 Bootstrap 4 中将 "row"-s 放入 "d-flex"中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41745370/