Bootstrap 4 - Flex 垂直对齐答案

【问题标题】：Bootstrap 4 - Flex vertical alignBootstrap 4 - Flex 垂直对齐
【发布时间】：2017-05-11 02:16:11
【问题描述】：

我正在使用 bootstrap 4 弹性框来创建垂直对齐，但是我仍然有一个古老的问题，即我的行和列没有扩展到容器的全高。因此，我的垂直对齐弹性框代码不起作用，因为容器仅与内容一样高。

由于 hero 类设置为 70vh，我希望内容在该容器内垂直对齐。因此，H2、P 和 a 标记使用新的引导 flex 网格布局在该英雄包装器中垂直居中

是否必须设置最小高度才能解决此问题？

.hero {
  background: red;
  width: 100%;
  height: 70vh;
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/>

<div class="hero">
  <div class="container">
    <div class="row flex-items-xs-middle">
      <div class="col-xs">
        <h2>a real tag line here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
        <a class="tek-btn" href="#">Order now!</a>
      </div>
    </div>
  </div>
</div>

小提琴示例 - https://jsfiddle.net/7qynca6z/

【问题讨论】：

"问题我的行和列没有展开到容器的全高" -- 你需要容器 div 的高度是多少？
英雄的全高是 70vh，所以我希望内容在该容器内垂直对齐。对不起，我会更新问题以更清楚

标签： html twitter-bootstrap css flexbox

【解决方案1】：

这是一个使用最新 Bootstrap 4（alpha 6）的更新解决方案。
不需要额外的 CSS。

https://www.codeply.com/go/hFtD71FMc4

<div class="hero">
  <div class="container d-flex align-items-center h-100">
     <div class="row">
        <div class="col-xs">
        <h2>a real tag line here</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
           <a class="tek-btn" href="#">Order now!</a>
        </div>
     </div>
  </div>
</div>

【讨论】：

【解决方案2】：

只需将hero 设为弹性框，然后将其提供给align-items: center。

见下面的演示和Updated fiddle here:

.hero {
  background: red;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/>

<div class="hero">
  <div class="container">
    <div class="row flex-items-xs-middle">
      <div class="col-xs">
        <h2>a real tag line here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
        <a class="tek-btn" href="#">Order now!</a>
      </div>
    </div>
  </div>
</div>

【讨论】：