부트 스트랩 4에서 중첩 된 격자를 사용하는 방법 flexbox 사용

Question

flexbox과 함께 부트 스트랩 4 CSS를 사용하고 중첩 된 격자에 문제가 있습니다. 네스트 그리드는 플렉스 박스가없는 부트 스트랩 4에서 예상대로 작동하지만, 플렉스 박스를 사용하면 요소가 수평으로 배열하는 대신 스택됩니다. 이 코드 :

<main class="container-fluid"> 
    <form novalidate> 
     <div class="row"> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group"> 
        <label>Single input</label> 
        <div class="input-group input-group-sm"> 
         <span class="input-group-addon">1</span> 
         <input type="text" class="form-control" placeholder="100%"> 
        </div> 
       </fieldset> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group row"> 
        <div class="col-md-6"> 
         <label>Double Input 1</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
        <div class="col-md-6"> 
         <label>Double Input 2</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
       </fieldset> 
      </div> 
     </div> 
    </form> 
</main> 

this view을 만듭니다.

편집 : 이상하게도 두 번째 열의 필드 집합을 div로 변경하면 레이아웃이 예상대로 작동합니다. 그러나 요소의 계산 된 높이 외에 fieldsets와 div 간의 의미있는 CSS 차이를 찾을 수 없었습니다. 레이아웃을 깨는 fieldset에 대해서는 무엇입니까 ??

불행히도 cdn을 통해 사용할 수있는 부트 스트랩 4 css의 버전이 flexbox를 지원하지 않기 때문에 jsfiddle을 만들 수 없습니다.

Answer 1

내면 .row은 <fieldset> 태그입니다.

TWBS 필드 세트의 여백은 0으로 설정되고 행 클래스는 왼쪽/오른쪽으로 -15px로 설정됩니다. 을 사용하는 조합은 레이아웃을 나눕니다. 따라서 줄이 바뀝니다.

이와 같이 별도의 .row<div>에 중첩을 시도하십시오.

<!-- does not work --> 
<fieldset class="form-group row"> 
    ... 
</fieldset> 


<!-- better solution --> 
<div class="row"> 
    <fieldset class="form-group"> 
    .. 
    </fieldset> 
</div>