垂直对齐多行与bootstrap 4 flexbox

Question

我正在使用bootstrap 4 flexbox，我有一个全屏部分，其中我想要两行。该部分中间的一行和该部分底部的一行。我让flex容器有弯曲方向：列。

如果我只有一行，那么它很容易以flexbox为中心，但是当我添加第二行时就会出现问题。我使用汽车保证金但不完全像我想要的那样。底行的高度越高，中间行的中心越小。

这是一个了解我在问什么的bootply。尝试改变底行的高度。

https://www.bootply.com/v9jmuxhLBd

由于

Answer 1

您可以使用 Flexbox ， 定位 和 视口单元< / EM> ：

＆＃13;

＆＃13;

body {margin: 0}

div {width: 100%}

#section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: Lavender;
}

#section .row:nth-child(2) { /* or: ":nth-of-type(2)" */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* or "right: 0" */
}

＆＃13;

<header id="section">
  <div class="container-fluid h-100 text-white d-flex justify-content-center">
    <div class="row w-100 align-self-center justify-content-center" style="background-color: red">
      <div class="col-8 text-center" style="background-color: green">
      I'm vertically centered inside the #section!
      </div>
    </div>
    <div class="row w-100 align-self-center justify-content-center" style="background-color: red">
      <div class="col-8 text-center" style="background-color: blue">
      I'm just another row inside the #section!
      </div>
    </div>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不完全确定你在这里想要实现的目标，如果你想要在该部分中有三行，那么就只有三行像;

<header id="section">
 <div class="container-fluid">
   <div class="row"> <!-- opening row --> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  <!-- or how ever you want it-->
    </div> <!-- closing row --> 
   <div class="row"> <!-- opening row --> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  <!-- or how ever you want it-->
    </div> <!-- closing row -->  
   <div class="row"> <!-- opening row --> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  <!-- or how ever you want it-->
    </div> <!-- closing row -->  
 </div> <!-- closing container --> 
</header> <!-- closing container -->