vertikale Ausrichtung mehrerer Zeilen mit Bootstrap 4 Flexbox

Question

Ich benutze Bootstrap 4 Flexbox und ich habe einen Vollbildbereich, in dem ich zwei Zeilen möchte. Eine Reihe in der Mitte des Abschnitts und eine Reihe am Ende des Abschnitts. Ich habe den Flex-Container Flex-Richtung haben: Spalte.

Wenn ich nur eine Reihe habe, ist es leicht, sie mit flexbox zu zentrieren, aber wenn ich die zweite hinzufüge, gibt es das Problem. Ich benutze automatische Ränder, aber es ist nicht ganz so, wie ich es möchte. Je höher die untere Reihe ist, desto weniger zentriert ist die mittlere Reihe.

Hier ist ein Bootply zu verstehen, was ich fragen. Versuchen Sie, die Höhe der unteren Reihe zu ändern.

https://www.bootply.com/v9jmuxhLBd

Dank

Answer 1

Sie können die Vorteile der Flexbox nehmen, Positionierung und Ansichtsfenster Einheiten das gewünschte Ergebnis zu erzielen:

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100vw} 
 

 
div { 
 
    width: 100%; 
 
} 
 

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

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

<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>

Answer 2

ich nicht ganz sicher bin, was Sie versuchen, hier zu erreichen, wenn Sie eine drei Zeilen in diesem Abschnitt sollen dann nur noch drei Reihen mögen;

<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 -->