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/