ブートストラップ4のフレックスアライメント

Question

私は全く混乱しています。私はこれを理解してからjsfiddleをリフレッシュし、何とか解決策が変わった。私は行に2つの列を持つ行を持っています。私は2つの列を同じ行に整列させることはできません。私はjustify-content-aroundを使ってみましたが動作しません。ヘルプをいただければ幸いです。

<div class="container-fluid"> 
    <div class="d-flex flex-row justify-content-around my-flex-container"> 
    <div class="d-flex flex-column my-flex-container-column"> 
     <div class="flex-row my-flex-container">Row 1</div> 
     <div class="flex-row my-flex-container">Row 2</div> 
     <div class="flex-row my-flex-container">Row 3</div> 
     <div class="flex-row my-flex-container">Row 4</div> 
    </div> 
    <div class="d-flex flex-column my-flex-container-column"> 
     <div class="d-flex flex-row my-flex-container"> 
     <div class="flex-column my-flex-container-column"> 
      <div class="flex-row my-flex-container">Row 1 
      </div> 
      <div class="flex-row my-flex-container">Row 2 
      </div> 
     </div> 
     </div> 
     <div class="d-flex flex-row flex-1 my-flex-container"> 
     <div class="my-auto">ROW 3</div> 
     </div> 

    </div> 
    </div> 
</div> 

jsfiddle here

Answer 1

あなたはそれhere得ることができ、アルファからベータ版にあなたのブートストラップバージョンを更新する必要があります。

.my-flex-container { 
 
    border: 2px solid green; 
 
    } 
 
    .my-flex-container-column { 
 
    border: 2px solid green; 
 
    } 
 
    .flex-1{ 
 
    flex: 1; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="d-flex flex-row justify-content-around my-flex-container"> 
 
    <div class="d-flex flex-column my-flex-container-column"> 
 
     <div class="flex-row my-flex-container">Row 1</div> 
 
     <div class="flex-row my-flex-container">Row 2</div> 
 
     <div class="flex-row my-flex-container">Row 3</div> 
 
     <div class="flex-row my-flex-container">Row 4</div> 
 
    </div> 
 
    <div class="d-flex flex-column my-flex-container-column"> 
 
     <div class="d-flex flex-row my-flex-container"> 
 
     <div class="flex-column my-flex-container-column"> 
 
      <div class="flex-row my-flex-container">Row 1 
 
      </div> 
 
      <div class="flex-row my-flex-container">Row 2 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="d-flex flex-row flex-1 my-flex-container"> 
 
     <div class="my-auto">ROW 3</div> 
 
     </div> 
 
    
 
    </div> 
 
    </div> 
 
</div>