自舉網格失真

<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 class ='col-md-3'是動態生成的。自舉網格失真

它應該看起來像一張表，每行只有4列。由於高度不均勻，圖像堆疊在一起看起來不像桌子。

代碼有問題嗎？結果：http://i.stack.imgur.com/1hNPs.png

來源

2014-10-10 Karl Wong

您需要添加更多行。因爲每個列的寬度都是3，所以每行只能包含4列。 – 2pha 2014-10-10 03:50:00

擴展@ 2pha評論：如果您查看Bootstrap文檔，行基於* 12列*網格系統。一旦你閱讀了12欄（比如4個'col-md-3' div），你需要關閉你的div作爲「行」並開始一個新的行。 – 2014-10-10 03:52:30

這可能會幫助你http://stackoverflow.com/questions/30423892/bootstrap-gap-between-columns-on-mobile-display/30425750#30425750 – 2015-10-12 09:43:58

在列的自舉總數在一排是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

如果我希望它改變時，屏幕大小是不同的？例如：例如

– 2014-10-10 04:18:33

如果您顯示的數據如表格1的記錄有4列，那麼您不需要將col-md-3更改爲col-lg-6。添加col-lg-3作爲列將保持不變。 – Kiran 2014-10-10 04:34:51

另外它取決於你的設計什麼樣的列數，你想顯示在大中小分辨率 – Kiran 2014-10-10 04:41:47

由於不同的列大小的，它是這樣發生的。這可以通過以下方式修復：

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

來源

2017-01-09 01:20:12

自舉網格失真

回答

相關問題