html - bootstrap 3 - 崩溃 'jump' 行为

Question

我在使用 bootstrap 的折叠功能时遇到了一个奇怪的行为。折叠和展开时，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 中的Jump 是由于 .well (margin) 类 CSS。

.well 类添加 margin-bottom: 20px; 当 collapse 得到 display:none 时会导致跳转> 属性(property)。而.well的padding也在这次跳转中起作用。

为了让它collapse更平滑，在.collapseDIV中添加.well类 如下所示，还有这个 CSS。

---

为了快速升级，.well 类添加了 margin-bottom、padding 和 min-height，这会导致 jump，因为它会影响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>