bootstrap 3 - 崩溃“跳跃”行为

Question

使用引导程序的折叠功能时出现奇怪的行为。当折叠和解开时，div呈现“跳跃”行为。

这显示在following fiddle中。

下面的代码

<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
    Refine Search 
    <span class="caret"></span> 
</button> 

<div class="collapse refine-search-collapse-container well" id="refine-search"> 
    <form class="form-horizontal"> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">ad</option> 
      <option value="">sfsd</option> 
      <option value="">sdf</option> 
      <option value="">sf</option> 
      <option value="">sdf</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">Blah1</option> 
      <option value="">Blah2</option> 
      <option value="">Blah3</option> 
      <option value="">Blah4</option> 
      <option value="">Blah5</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <input type="number" class="form-control"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">Yes</option> 
      <option value="">No</option> 
     </select> 
     </div> 
    </div> 
    </form> 
</div> 

<div class=""> 
    <h3>Search Result</h3> 
</div> 

Answer 1

跳转在您的collapse归因于.well class CSS。

.well类增加margin-bottom: 20px;当collapse得到display:none属性时会引起跳转。并且.well的padding也在此跳跃中起作用。

为了让collapse顺畅，加上.collapseDIV 内.well类，如下图所示，这CSS。

---

升级很快，.well类增加margin-bottom, padding, and min-height导致跳，因为它会影响display:none箱模型。

.refine-search-collapse-container .well { 
 
    margin-bottom: 0; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 
 

 

 
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
 
    Refine Search 
 
    <span class="caret"></span> 
 
</button> 
 

 
<div class="collapse refine-search-collapse-container" id="refine-search"> 
 
    <form class="form-horizontal well"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">ad</option> 
 
      <option value="">sfsd</option> 
 
      <option value="">sdf</option> 
 
      <option value="">sf</option> 
 
      <option value="">sdf</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">Blah1</option> 
 
      <option value="">Blah2</option> 
 
      <option value="">Blah3</option> 
 
      <option value="">Blah4</option> 
 
      <option value="">Blah5</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <input type="number" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">Yes</option> 
 
      <option value="">No</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<div class=""> 
 
    <h3>Search Result</h3> 
 
</div>

Answer 2

删除 “以及” 从这个以下的div类，它会正常工作..没有跳跃效果..

<div class="collapse refine-search-collapse-container well" id="refine-search"> 

默认情况下，“细化 - 搜索 - 崩溃容器“div没有采取任何高度，但当点击”细化搜索“按钮来隐藏”细化搜索折叠容器“部分，它需要一个高度”40px“。它会造成问题。所以这个跳跃问题发生了。

Answer 3

你好，这是你的fiddle更新后。你的代码应该是这样的：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 

     <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
     Refine Search 
     <span class="caret"></span> 
     </button> 
    </div> 

    <div class="clearfix"></div> 

    <div class="col-xs-12"> 
     <form class="form-horizontal collapse" id="refine-search"> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">ad</option> 
       <option value="">sfsd</option> 
       <option value="">sdf</option> 
       <option value="">sf</option> 
       <option value="">sdf</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">Blah1</option> 
       <option value="">Blah2</option> 
       <option value="">Blah3</option> 
       <option value="">Blah4</option> 
       <option value="">Blah5</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <input type="number" class="form-control"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">Yes</option> 
       <option value="">No</option> 
      </select> 
      </div> 
     </div> 
     </form> 
    </div> 

    <div class="clearfix"></div> 

    <div class="col-xs-12"> 
     <h3>Search Result</h3> 
    </div> 
    </div> 
</div> 

Answer 4

不应该有任何padding-bottom or padding-top与类.collapse那些股利。该填充使跳转效果

Answer 5

我已经更新了你的提琴经过下面的链接可能是它可以帮助你。

JSFiddle

把你well类form元素，只是在下面添加CSS

CSS代码 -

.well{ 
    margin-bottom:0px; 
} 

Answer 6

你不应该收缩元件上的任何填充或利润率。这是造成跳跃效应的原因。

即：在您的情况，它有其他类里面添加填充和利润。

<div class="refine-search-collapse-container well collapse">

如果您想保留目前所有的风格，如.well等，这是最好的包装你现有的可折叠元件周围的另一个标签，使父DIV收缩元件，

看到更新的例子：

在你的情况下，你需要一个.clearfix在可折叠的元素，因为它有一个孩子，将overf低，因为.well类

http://jsfiddle.net/vuk1dbag/19/