html - 首次单击时 Bootstrap 折叠展开得太远

Question

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

https://jsfiddle.net/6pmsp9ou/

这似乎只在窗口超过一定宽度时才会发生。如果查看窗口的宽度变小，它会正常扩展。这可以在 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

当展开一个元素时——浏览器必须计算它完成时的高度以顺利完成动画，否则它会“捏造”它并过度。

这通常是在正在转换的元素上填充或不清除内部 float 元素时抛出的。

看来您有很多元素使用 col-md-* 类，它们设置宽度和 float 。这些设计用于与 class="row"一起使用 - 抵消边距并清除 float 。

最好将行和 col-- 类一起使用，以消除因不清除 float 而产生的许多意外副作用