2016-05-12 24 views
2

Verwenden von Bootstrap (3.3.6) zu reduzieren, mit den reduzierbaren DIVs zwischen Formulareingaben \ Labels. Wenn die DIVs expandieren, gibt es eine Art Snap-Jitter.Bootstrap Collapse hat Snap Jitter

Der Code für das Problem: https://jsfiddle.net/ybto1zvk/

ich ähnlichen Position Vortrag über Jitter gesehen habe, wenn einer der DIVs Polsterung, aber wie Sie sehen können, gibt es kein Styling außer dem, was Bootstrap-Anwendung ist ...

Habe mit Chrome und Firefox versucht, kein Unterschied.

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'); 

}); 

Antwort

3

Dies wird durch den unteren Rand Eigentum verursacht wird (von Bootstrap-Set) auf den Brunnen. Versuchen Sie hinzuzufügen:

.well{margin:0} 

Zu Ihrem CSS, sollte dies das Problem lösen.

0

Dieses Problem ist wegen der kollabierenden Marge. Wie pro Mozilla Dokumentation:

Eltern und erstes/letztes Kind: Wenn es keine Grenze, Polsterung, Inline-Inhalt oder Spiel des margin-top eines Block von dem margin-top seinem ersten zu trennen child block oder no border, padding, inline content, height, min-height oder max-height, um den unteren Rand eines Blocks vom unteren Rand des letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert. Der reduzierte Rand endet außerhalb des übergeordneten Elements.

In Ihrem Fall margin-bottom von .well innerhalb .collapse dieses Problem schafft. Sie können dieses Problem auf viele Arten lösen. Aber zwei Möglichkeiten sind

  1. hinzufügen overflow: hidden auf Mutter
  2. entfernen margin-bottom von .well

Hier arbeitet Fiddle

Verwandte Themen