Question

使用Bootstrap（3.3.6）折叠，折叠式DIV位于表单输入\标签之间。当DIV展开\ hide时，会出现一种snap \ jitter。

当其中一个DIV有填充时，我看过类似的关于抖动的帖子，但正如你所看到的，除了引导程序正在应用之外没有任何样式......

尝试使用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，这应该可以解决问题。

Answer 2

此问题是由于保证金折叠。根据{{3}}文档：

父级和第一个/最后一个孩子：如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或最大高度来将块的边距底部与其最后一个子节点的边距底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

如果您margin-bottom .well .collapse内的overflow: hidden正在创建此问题。您可以通过多种方式解决此问题。但有两种方式

在父

margin-bottom

从.well

.media-body

这是工作Mozilla

Bootstrap折叠有snap \ jitter

2 个答案: