Question

以下jsfiddle有两个折叠面板。但是，当每个窗口展开和折叠时，动画很笨拙并且不流畅 - 它首先扩展得比它需要的大，其中包含的输入字段不可见，然后突然显示输入字段。

这仅在窗口高于某个宽度时才会出现。如果观察窗口较宽，则会正常扩展。这可以在jsfiddle中看到，因为它似乎在默认宽度下正常展开和折叠，但如果你扩大了查看窗口，则会观察到上述行为。

如何让它正常展开和折叠？

<div id='ah-body'>
  <div style='max-height:500px;overflow-y:auto;'>
    <a href='#section1' class='collapse-header col-sm-12' data-toggle='collapse'>Section 1</a>
    <div id='section1' class='collapse'>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field1'>Field 1</label>
        <input id='field1'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field2'>Field 2</label>
        <input id='field2'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field3'>Field 3</label>
        <input id='field3'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field4'>Field 4</label>
        <input id='field4'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field5'>Field 5</label>
        <input id='field5'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field6'>Field 6</label>
        <input id='field6'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field7'>Field 7</label>
        <input id='field7'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field8'>Field 8</label>
        <input id='field8'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field9'>Field 9</label>
        <input id='field9'>
      </div>
    </div>
  </div>
  <a href='#section2' class='collapse-header col-sm-12' data-toggle='collapse'>Section 2</a>
  <div id='section2' class='collapse'>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field10'>Field 10</label>
      <input id='field10'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field11'>Field 11</label>
      <input id='field11'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field12'>Field 12</label>
      <input id='field12'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field13'>Field 13</label>
      <input id='field13'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field14'>Field 14</label>
      <input id='field14'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field15'>Field 15</label>
      <input id='field15'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field16'>Field 16</label>
      <input id='field16'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field17'>Field 17</label>
      <input id='field17'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field18'>Field 18</label>
      <input id='field18'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field19'>Field 19</label>
      <input id='field19'>
    </div>
  </div>

Answer 1

扩展元素时 - 浏览器必须计算完成后平滑完成动画的高度，否则会“捏造”它并超调。

这通常会从正在转换的元素上填充或者不清除内部浮动元素。

看来你有很多使用col-md- *类的元素，它们设置了宽度和浮点数。这些设计用于class =“row” - 它可以抵消边距并清除浮动。

优良作法是将行和col- - 类一起使用以消除许多意外的副作用，而不是清除浮动

Answer 2

您需要删除部分标题中的课程col-sm-12。

<强>释：

Chilly的答案解释了为什么collapse-header类与预定义的网格类（例如col-sm-12）冲突，并且还讨论了网格系统应该如何实现的原因。下面的代码并没有使用类row，因为这个答案只是通过一种解决方法来解决OP的问题。请查看official documentation here以了解有关网格系统正确使用的更多信息。

<强>段：

<a href='#section1' class='collapse-header' data-toggle='collapse'>Section 1</a>
<a href='#section2' class='collapse-header' data-toggle='collapse'>Section 2</a>

Link to working JSFiddle

完整代码：

＆＃13;

#ah-body {
  margin: 0 10% 0 10%;
}
#ah-body .collapse-header {
  color: black;
  cursor: pointer;
  display: block;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}
#ah-body .collapse-header:after {
  content: '-';
  font-size: 30px;
  margin: 0 0 0 60%;
}
#ah-body .collapse-header[aria-expanded='true']:after {
  content: '+';
}
#ah-body .input-wrapper label {
  display: block;
}
#ah-body .input-wrapper.required label:after {
  color: #F00;
  content: '*';
}
#ah-body input {
  border: 1px solid #BBB;
}
#ah-body .input-wrapper {
  margin: 0 auto 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id='ah-body'>
  <div style='max-height:500px;overflow-y:auto;'>
    <a href='#section1' class='collapse-header' data-toggle='collapse'>Section 1</a>
    <div id='section1' class='collapse'>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field1'>Field 1</label>
        <input id='field1'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field2'>Field 2</label>
        <input id='field2'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field3'>Field 3</label>
        <input id='field3'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field4'>Field 4</label>
        <input id='field4'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field5'>Field 5</label>
        <input id='field5'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field6'>Field 6</label>
        <input id='field6'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field7'>Field 7</label>
        <input id='field7'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field8'>Field 8</label>
        <input id='field8'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field9'>Field 9</label>
        <input id='field9'>
      </div>
    </div>
  </div>
  <a href='#section2' class='collapse-header' data-toggle='collapse'>Section 2</a>
  <div id='section2' class='collapse'>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field10'>Field 10</label>
      <input id='field10'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field11'>Field 11</label>
      <input id='field11'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field12'>Field 12</label>
      <input id='field12'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field13'>Field 13</label>
      <input id='field13'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field14'>Field 14</label>
      <input id='field14'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field15'>Field 15</label>
      <input id='field15'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field16'>Field 16</label>
      <input id='field16'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field17'>Field 17</label>
      <input id='field17'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field18'>Field 18</label>
      <input id='field18'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field19'>Field 19</label>
      <input id='field19'>
    </div>
  </div>

＆＃13;

首次单击时，Bootstrap崩溃扩展得太远

2 个答案: