부트 스트랩 4 부트 스트랩 3처럼 플로트 스타일이 가능합니까?

Question

부트 스트랩 4로 개발하기 시작했는데 이제는이 문제를 발견했습니다 :부트 스트랩 3 컬럼 시스템을 사용할 때 float을 사용하기 때문에 여러 컬럼을 한 행에 삽입 할 수 있고 "col-size" 이렇게 지정된 :

http://codepen.io/seltix/pen/PprmVE

012,351 :

------- ------- ------- 
| COL 1 | | COL 2 | | COL 3 | 
|  | ------- ------- 
|  | | COL 4 | | COL 5 | 
------- ------- ------- 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-6 panel height-1"> 
     <div class="bg-danger">this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div> 
    </div> 
    <div class="col-sm-3 panel height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 panel height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 panel height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 panel height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 panel height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
</div> 

그러나 각 소자는 행의 전체 높이를 사용하며, 그 결과이있는 스트랩 4 플렉스 시스템

http://codepen.io/seltix/pen/QpXvRJ

------- ------- ------- 
| COL 1 | | COL 2 | | COL 3 | 
|  | ------- ------- 
|  | 
------- ------- 
| COL 4 | | COL 5 | 
------- ------- 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-6 card height-1"> 
     <div class="bg-danger">this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div> 
    </div> 
    <div class="col-sm-3 card height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 card height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 card height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 card height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
    <div class="col-sm-3 card height-2"> 
     <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
    </div> 
</div> 

나는 이미 Google과 이것에 대한 부트 스트랩 4 문서를 검색하지만 해결책은 없다. 가장 가까운 i cound는 카드 - 칼럼, 벽돌 같은 예제 였지만이 예제에서는 컬럼/카드 너비를 지정할 수 없기 때문에 작동하지 않는다고 생각합니다. 덕분에 !

Answer 1

예, 유틸리티 클래스를 사용하여 부트 스트랩 4에서 3.x 그리드 "부동"동작을 얻을 수 있습니다.

d-block을 사용하여 display : flex to display : block 행을 변경하십시오. 그리고 ..

http://www.codeply.com/go/BmN6ZYQdGm

<div class="row d-block"> 
     <div class="col-md-6 float-left card height-1"> 
      <div class="bg-danger">1 
       <br>this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div> 
     </div> 
     <div class="col-md-3 float-left card height-2"> 
      <div class="bg-info">2 
       <br>blue boxes count may change depending on the content. 
       <br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
     </div> 
     <div class="col-md-3 float-left card height-2"> 
      <div class="bg-info">3 
       <br>blue boxes count may change depending on the content. 
       <br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
     </div> 
     <div class="col-md-3 float-left card height-2"> 
      <div class="bg-info">4 
       <br>blue boxes count may change depending on the content. 
       <br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
     </div> 
     <div class="col-md-3 float-left card height-2"> 
      <div class="bg-info">5 
       <br>blue boxes count may change depending on the content. 
       <br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
     </div> 
     <div class="col-md-3 float-left card height-2"> 
      <div class="bg-info">6 
       <br>blue boxes count may change depending on the content. 
       <br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div> 
     </div> 
    </div> 

http://www.codeply.com/go/BmN6ZYQdGm