부트 스트랩 4 플렉스 정렬 열

Question

전적으로 혼란 스럽습니다. 나는 이것을 알아 낸 다음 jsfiddle를 새로 고쳤고 어떻게 든 솔루션이 변경되었습니다. 행에 두 개의 열이있는 행이 있습니다. 같은 행에 두 개의 열을 정렬 할 수 없습니다. 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>