引导崩溃具有快速抖动

Question

使用引导带(3.3.6)折叠，可折叠的DIVs位于表单输入\标签之间。当DIVs展开\隐藏时，会有一种快速抖动。

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

我见过类似的帖子谈到抖动当一个DIVs有填充，但你可以看到，没有样式，除了引导应用.

已经尝试过Chrome和Firefox，没什么不同。

<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

这是由井上的底部边缘属性(由引导设置)造成的。试着添加：

    .well{margin:0}

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

Answer 2

这个问题是因为融资融券的崩溃。根据Mozilla文档：

父级和第一个/最后一个子节点:如果没有边框、填充、内联内容或权限将块的边缘--从其第一个子块的顶部--分隔开，或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边缘底部与最后一个子块的边缘底部分开，那么这些边距就会崩溃。崩溃的边距在父级之外结束。

在您的例子中，margin-bottom of .well In .collapse正在创建这个问题。你可以通过多种方式解决这个问题。但是有两种方法

1. 在父级上添加overflow: hidden
2. 从margin-bottom中删除.well

这是工作小提琴