Question

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

当我展开面板1时会发生这种情况.1和3之间的间隙无缘无故地有大量的空格。我似乎无法找到解决问题的方法。

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Bootply example

Answer 1

虽然看起来可能不像，但这才是实际发生的事情。面板三被推向右侧，4被推到一个新线。

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

您在row和container之间缺少col-sm-6 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>

Bootstrap面板折叠创建间隙

1 个答案: