Question

使用bootstrap的折叠功能时，我会遇到一种奇怪的行为。在折叠和解除折叠时，div会出现“跳跃”状态。行为。

中

这是代码

<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 CSS类。

.well类添加margin-bottom: 20px;，当collapse获取display:none属性时会导致跳转。 padding的{{1}}也会在此次跳跃中发挥作用。

要使.well更顺畅，请在collapse .well内添加.collapse班级如下所示，此DIV。

要快速升级，CSS课程会添加导致跳转的.well，因为它会影响margin-bottom, padding, and min-height上的框模型。

＆＃13;

display:none

＆＃13;

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

＆＃13;

Answer 2

我已经通过以下链接更新了您的小提琴可能对您有帮助。

JSFiddle

将您的well课程设为form元素，然后添加以下CSS

CSS代码 -

.well{
  margin-bottom:0px;
}

Answer 3

可折叠元素上不应有任何填充或边距。这是导致跳跃效应的原因。

ie：在您的情况下，它有额外的类添加填充和边距。

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

如果要保留所有当前样式，例如.well等，最好将现有的可折叠元素包装在另一个标记周围，并使父div成为可折叠元素，

查看更新的示例：

在您的情况下，您需要在可折叠元素上使用.clearfix，因为它有一个因.well类

而会溢出的子元素

<强> http://jsfiddle.net/vuk1dbag/19/

Answer 4

嗨，这是您更新后的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 5

对于那些带有类.collapse的div，不应该有padding-bottom or padding-top。该填充使跳转效果

Answer 6

这是一个旧的错误，无法在版本3中修复。将margin-bottom的{{1}}设置为0.您可能必须设置顶部和底部边距和/或填充其他元素为0也取决于它们相对于你正在折叠的位置（在这种情况下是井）。不幸的是，你只需要玩游戏。

另外，如果你正在折叠/展开几个彼此靠近的元素，并且想要在将边距和/或填充设置为0之后调整它们之间的空间（这将把所有东西塞进去），那么hack可以工作（但是我鄙视使用）是在它们之间放一个空的well并调整它的顶部和底部填充或边距。

以下是Github上的问题：https://github.com/twbs/bootstrap/issues/12093

Answer 7

删除＆＃34;以及＆＃34;从下面的div开始，它会正常工作..没有跳跃效果..

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

默认情况下，＆＃34; refine-search-collapse-container＆＃34; div没有采取任何高度，但点击＆＃34;优化搜索＆＃34;按钮隐藏＆＃34; refine-search-collapse-container＆＃34;部分，它需要一个高度＆＃34; 40px＆＃34;。它造成了问题。所以这个跳跃问题已经发生了。

bootstrap 3 - 崩溃＆＃39;跳跃＆＃39;行为

7 个答案: