Bootstrap面板崩潰造成空白

所以我有2列，每個面板2個。每列都是50％（col-md-6），其中2個面板具有摺疊功能。崩潰工作正常，但我遇到的問題是，如果我擴大面板，左下角div移動太低，並創建面板1和3之間的巨大差距。Bootstrap面板崩潰造成空白

這是當我展開面板時會發生什麼1. 1和3之間的空白無緣無故地有空白。我似乎無法找出解決方法。

panel1 | panel 2 
     | 
     | panel 4 
     | 
panel3 |

Bootply example

來源

2014-04-17 Envious

似乎有很多重複的元素的ID在你的代碼，這是從來沒有很好 – wavemode

@wavemode是的，它很混亂。大部分ID實際上並沒有做任何事情。他們只是存在，所以我可以識別他們。 – Envious

雖然它可能不像它，這是什麼是真正發生的事情。小組三被推到右邊，並且4被推到一個新的線。

panel1 | panel 2 
     | 
     | panel 3 
     | 
panel4 |

你缺少你container和col-sm-6之間row的div。這將防止列被推動。

DEMO

<div class="container"> 
    <div class="row"> <!--ADD ROW--> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      1 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      2 
     </div> 
    </div> 
    </div><!--END ROW--> 

    <div class="row"><!--ADD ROW--> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      3 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      4 
     </div> 
    </div> 
    </div><!--END ROW--> 
</div>

編輯：或者是這樣的....

DEMO

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      1 
     </div> 
     <div class="panel panel-primary"> 
      2 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="panel panel-primary"> 
      3 
     </div> 
     <div class="panel panel-primary"> 
      4 
     </div> 
    </div> 
    </div> 
</div>

來源

2014-04-17 20:02:44 Schmalzy

修復了空隙，這就是這個問題的關鍵，但如果其中一個面板內有大量數據，則創建行會使其看起來不好。你知道有什麼方法可以解決這個問題嗎？ – Envious

@Envious在上面看到我的編輯，我想這就是你要找的東西......這隻會將面板推下，而不是整行。 – Schmalzy

Bootstrap面板崩潰造成空白

回答

相關問題