Bootstrap 面板折叠产生间隙 [英] Bootstrap panel collapse creating gaps

查看：26
本文介绍了Bootstrap 面板折叠产生间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我有 2 列，每列有 2 个面板.每列是 50% (col-md-6)，里面有 2 个具有折叠功能的面板.折叠工作正常，但我遇到的问题是，如果我展开面板，左下角的 div 移动得太低，并在面板 1 和 3 之间产生巨大的间隙.

这就是我展开面板 1 时发生的情况. 1 和 3 之间的间隙无缘无故有很多空白.我似乎想不出修复它的方法.

panel1 |面板 2||面板 4|面板3 |

Bootply 示例

解决方案

虽然看起来不像，但这就是实际发生的事情.面板 3 被推到右侧，面板 4 被推到一个新行.

panel1 |面板 2||面板 3|面板4 |

您的 container 和 col-sm-6 之间缺少 row div.这将防止列被推来推去.

演示

<div class="row"><!--添加行--><div class="col-sm-6"><div class="panel panel-primary">1

<div class="col-sm-6"><div class="panel panel-primary">2

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

<div class="col-sm-6"><div class="panel panel-primary">4

</div><!--END ROW-->

或类似的东西....

演示

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

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆