ブートストラップでのスタイリングモーダルタイトルv4

Question

私はモーダルタイトルのコンテンツのスタイルを設定しようとしています。中央の画像と、1つまたは2つのボタン/画像を含む2つの小さな列が含まれます。私はすべてを縦横に整列させたいと思います。センター画像のサイズは異なります。フレックスボックスの仕事のようです。

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

しかし、これは動作しません。私の実際のコードでは、＃headerLHS /＃headerRHS /＃myModalLabelの内容を動的に

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

設定されているこれまでのところ、私のCSSがあります。私は#lhsと#rhsでスタイリングが必要なようですが、どうしたらよいか分かりません。フレックスボックスのマークアップには何の役にも立ちませんでした。誰かが助けることができる？

ありがとうございました。

Answer 1

同じ高さの列がないので、親にもflexboxを適用し、 `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>

`