Styling Modal-Titel in Bootstrap v4

Question

Ich versuche, den Inhalt des modalen Titels zu stylen. Es enthält ein Bild in der Mitte und zwei kleinere Spalten mit 1 oder 2 Schaltflächen/Bildern. Ich möchte, dass alles vertikal und horizontal ausgerichtet ist. Die Größe der mittleren Bilder variiert. Scheint wie ein Job für flexbox. In meinem eigentlichen Code, der Inhalt von # headerLHS/# headerRHS/# myModalLabel dynamisch

<div class="modal-title row" id="headerBox" class="container-fluid"> 
     <div id="headerLHS" class="col-xs-3"><img id="lhs"/></div> 
     <div id="myModalLabel" class="col-xs-6"></div> 
     <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div> 
    </div> 

Bisher meine CSS ist gesetzt:

#headerLHS,#headerRHS { 
    display: flex; webkit-display: flex; 
    -webkit-flex-direction: column; /* Safari */ 
    flex-direction: column; 
    padding: 0px; 
    justify-content: space-around; 
    align-items: center; 
} 

Aber das funktioniert nicht. Ich brauche das Styling auf #lhs und #rhs, aber ich habe keine Ahnung, was es sein sollte. Ich habe mit allen Arten an Flex-Box-Markup gespielt, vergeblich. Kann jemand helfen?

Danke.

Answer 1

Sie haben keine Spalte mit gleicher Höhe, Sie sollten die Flexbox auch auf die Eltern anwenden und `flex-wrap: wrap;

#headerBox 
 
{ 
 
    display:flex; 
 
    webkit-display: flex; 
 
    flex-wrap: wrap; 
 
    webkit-flex-wrap: wrap; 
 
} 
 
#headerLHS,#headerRHS { 
 
    display: flex;  
 
    webkit-display: flex; 
 
    -webkit-flex-direction: column; /* Safari */ 
 
    flex-direction: column; 
 
    padding: 0px; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;"> 
 
     <div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div> 
 
     <div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div> 
 
     <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div> 
 
</div>

`