Bootstrap崩溃具有快照\抖动

丹格尔

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

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

当其中一个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');

});
第210章

这是由于井上的底部余量属性(由引导程序设置)引起的。尝试添加:

    .well{margin:0}

对于您的CSS,这应该可以解决问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档