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面板崩溃造成空白

回答

相关问题