부트 스트랩 격자 왜곡

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div> 
     <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div> 
     <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div> 
     <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div> 
     <div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div> 
     <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div> 
     <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div> 
     <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div> 
     <div class="col-md-3" style="height:30px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">9</div> 
     <div class="col-md-3" style="height:90px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">10</div> 
    </div> 
</div>

테이블 모양의 격자를 만들려고하면 div 클래스 = 'col-md-3'이 동적으로 생성됩니다.부트 스트랩 격자 왜곡

각 행에 4 개의 열만있는 테이블처럼 보입니다. 고르지 않은 높이 때문에 이미지가 테이블처럼 보이지 않게 쌓입니다.

코드에 문제가 있습니까? 결과 : http://i.stack.imgur.com/1hNPs.png

출처

2014-10-10 Karl Wong

더 많은 행을 추가해야합니다. 각 열의 너비가 3이므로 각 행에는 4 열만 포함되어야합니다. – 2pha

@ 2pha 주석으로 확장 : 부트 스트랩 문서를 보면 행은 * 12 열 * 그리드 시스템을 기반으로합니다. 12 개의 열 (예 : 4'col-md-3' div)을 읽은 후에는 "행"에 대한 div를 닫고 새 행을 시작해야합니다. –

이 도움이 될 수 있습니다 http://stackoverflow.com/questions/30423892/bootstrap-gap-between-columns-on-mobile-display/30425750#30425750 –

열의 스트랩 총 수에서이 행 (12)이며, 단지 4 COL-MD-3 때문에 다른 컬럼 크기 중 하나 개의 행

http://getbootstrap.com/css/#grid-example-basic

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div> 
     <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div> 
     <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div> 
     <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div> 

    </div> 

    <div class="row"> 
<div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div> 
     <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div> 
     <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div> 
     <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div> 


    </div> 
</div>

출처

2014-10-10 03:59:43 Kiran

화면 크기가 다른 경우 변경하려면 어떻게해야하나요? 예 :

–

4 열이있는 표 1 레코드와 같은 데이터를 표시하는 경우 col-md-3을 col-lg-6으로 변경할 필요가 없습니다. 테이블에 col-lg-3을 추가하면 열이 동일하게 유지됩니다. – Kiran

또한 디자인에 따라 큰 중형 및 소형 해상도로 표시 할 열의 수는 무엇입니까 – Kiran

에 배치 될 수있다 , 그것은 그렇게 일어난다. 다음을 수정하십시오 :

<div class="row" style="display:flex; flex-wrap:wrap;"> 
    ... 
</div>

출처

2017-01-09 01:20:12

부트 스트랩 격자 왜곡

답변

관련 문제