Html 引导3-折叠'；跳转'；行为

我在使用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>

优化搜索
公元
sfsd
自卫队
科幻小说
自卫队
胡说八道
废话
废话
废话
布拉赫
对
不
搜索结果

从下面的

div

中删除

井

类，它将正常工作；没有跳跃效应

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

默认情况下，

refine search collapse container

div

不采用任何高度，但当单击

refine search

按钮隐藏

refine search collapse container

部分时，其高度为“40px”。它导致了问题，因此发生了跳跃问题

您好，这是您的更新后信息。您的代码应该如下所示：

<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>

优化搜索
公元
sfsd
自卫队
科幻小说
自卫队
胡说八道
废话
废话
废话
布拉赫
对
不
搜索结果

对于带有class.collapse的div，不应该有任何

填充底部或填充顶部。填充使跳转效果
你的
折叠中的跳转是由于
.well
（
边距
）类CSS造成的

.well
类添加
页边距底部：20px当
折叠
获取
显示：无
属性时会导致跳转。而
.well
的
填充也在这个跳跃中起作用

要使其
collapse
更平滑，请在
.collapse
DIV
中添加
.well
类
如下图所示，此
CSS


为了快速升级，
.well
类添加了
边距底部、填充和最小高度
，这会导致跳跃，因为它会影响
显示：无
上的框模型


。优化搜索折叠容器。很好{
页边距底部：0；
}

优化搜索
公元
sfsd
自卫队
科幻小说
自卫队
胡说八道
废话
废话
废话
布拉赫
对
不
搜索结果
我已经更新了你的小提琴，请浏览下面的链接，也许它可以帮助你


把你的
类和
表单
元素放在一起，只需在下面添加CSS即可

CSS代码-

.well{
  margin-bottom:0px;
}

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

ie：在你的例子中，它有额外的类来添加填充和边距



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

参见更新的示例：

在您的情况下，您需要在可折叠元素上使用
.clearfix
，因为它有一个子元素，该子元素将由于
.well
类而溢出

这是一个旧错误，在版本3中无法修复。将
井的
边距底部设置为0。您可能需要将其他元素的上下边距和/或填充设置为0，这也取决于它们相对于要折叠的对象（在本例中为井）的位置。不幸的是，你只能到处玩了

此外，如果您要折叠/扩展几个彼此靠近的元素，并且在将边距和/或填充设置为0（这将把所有内容都塞进一起）后想要调整它们之间的空间，那么这种方法是可行的（但我不喜欢使用）就是在它们之间放置一个空的
div
，然后调整顶部和底部的填充或边距

Github上的问题是：
更好-将well类移动到表单元素看起来一样，摆脱了问题将
类移动到
表单
元素-boostrap js如何处理动画元素的高度计算似乎有问题。。。糟透了——像这样的东西是我远离所有像css/js框架这样的boostrap的原因之一，我宁愿自己写所有东西。-啊，即使这样也不能使搜索结果文本在展开时有一点跳跃。没有一个相对的答案。我在下面元素的顶部添加了一些填充，跳跃停止了。