javascript - Bootstrap Collapse 有 snap\jitter

Question

使用 Bootstrap (3.3.6) 折叠，可折叠的 DIV 位于表单输入\标签之间。当 DIV 展开\隐藏时，会出现一种快速\抖动。

问题代码:https://jsfiddle.net/ybto1zvk/

我看过类似的帖子讨论当其中一个 DIV 有填充时出现抖动，但正如您所见，除了应用 Bootstrap 之外没有任何样式...

尝试过 Chrome 和 Firefox，没有区别。

HTML

<form role="form">
  <div class="radio">
    <label>
      <input type="radio" name='radioinput' id="radio1"> One (click me)
    </label>
  </div>
  <div class="collapse" id="collapse-1">
    <div class="well">
      Sub 1
    </div>
  </div>

  <div class="radio">
    <label>
      <input type="radio" name='radioinput' id="radio2"> Two
    </label>
  </div>
  <div class="collapse" id="collapse-2">
    <div class="well">
      Sub 2
    </div>
  </div>

  <div class="radio">
    <label>
      <input type="radio" name='radioinput' id="radio3"> Three
    </label>
  </div>
  <div class="collapse" id="collapse-3">
    <div class="well">
      Sub 3
    </div>
  </div>

</form>

javascript

$('#radio1').click(function() {
  $('#collapse-1').collapse('toggle');
  $('#collapse-2').collapse('hide');
  $('#collapse-3').collapse('hide');

});

$('#radio2').click(function() {
  $('#collapse-2').collapse('toggle');
  $('#collapse-1').collapse('hide');
  $('#collapse-3').collapse('hide');
});

$('#radio3').click(function() {
  $('#collapse-3').collapse('toggle');
  $('#collapse-1').collapse('hide');
  $('#collapse-2').collapse('hide');

});

Answer 1

这是由井上的底部边距属性(由 Bootstrap 设置)引起的。尝试添加:

    .well{margin:0}

对于您的 css，这应该可以解决问题。