Bootstrap面板崩溃导致间隙 [英] Bootstrap panel collapse creating gaps

问题描述

所以我有2列，每个2个面板。每列都是50％（col-md-6），其中2个面板具有折叠功能。崩溃工作正常，但我遇到的问题是，如果我展开一个面板，左下角div移动得太低，并在面板1和3之间产生巨大的差距。

这是当我展开面板1时发生的情况。1和3之间的空白没有任何理由具有空白ALOT。我似乎无法找出解决方法。

  panel1 |面板2 
 | 
 |面板4 
 | 
 panel3 | 
  

Bootply示例

解决方案

尽管看起来可能不是这样，实际发生了什么。面板3被推到右边，并且4被推到一个新的线。

  panel1 |面板2 
 | 
 |面板3 
 | 
 panel4 | 
  

您在<行 code> container 和 col-sm-6 。这将防止列被推动。

DEMO

 < div class =container> 
< div class =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> 
  

So I've got 2 columns, with 2 panels each. Each column is 50% (col-md-6) with 2 panels inside that have collapse capabilities. Collapse works fine, but the problem I'm having is that If I expand a panel, the bottom left div moves far too low and creates a massive gap between panel 1 and 3.

This is what happens when I expand panel 1. The gap between 1 and 3 has ALOT of whitespace for no reason. I can't seem to figure out a way to fix it.

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Bootply example

解决方案

Although it may not look like it, this is what is actually happening. Panel three is pushed to the right, and 4 is pushed to a new line.

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

You are missing row divs between your container and col-sm-6. This will prevent the columns from being pushed around.

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>

EDIT: Or something like this....

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>

这篇关于Bootstrap面板崩溃导致间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！