Splitter für Twitter Bootstrap

Question

Was ist der beste Weg, um den Benutzer zu ermöglichen, dynamisch die Breite von Spalten einer Twitter Bootstrap formatierten Seite zu ändern?

Zum Beispiel, um einen vertikalen Teiler/Splitter im folgenden Beispiel hinzuzufügen?

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span6 resizeMe">Left</div> 
     <div class="span6 resizeMe">Right</div> 
    </div> 
</div> 

Answer 1

Ich glaube nicht, gibt es eine Bootstrap-Art und Weise ist zur Zeit jedoch können Sie eine Klasse zu einem Ihrer divs hinzufügen, die border-left:1px solid #EEE oder border-right:1px solid #EEE setzt. Das einzige Problem bei dieser Lösung ist, dass Ihre kombinierte Spannweite von 12 nun mehr als die normale span12 Breite von 1px ist und eine der divs auf die nächste Linie schieben wird. Wenn dies akzeptabel ist, können Sie dies beheben, indem Sie das zweite div nur span5 machen, sodass Ihre Gesamtmenge span11 + 1px ist.

Es wäre schön, wenn der Bootstrap eine Klasse dafür hätte, die das normale Grid-System nicht stört.

Answer 2

Wenn es Ihnen nichts ausmacht, nicht animiert oder dynamisch einstellbar zu sein, hier ist etwas, an dem ich mit Bootstrap gearbeitet habe (ich benutze 2.1.0, aber das sollte in jeder 2.x Version funktionieren):

eine Schaltfläche Gruppe einrichten:

<div class="btn-group"> 
     <a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a> 
     <a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a> 
     <a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a> 
     </div> 

Nun, hier ist die JQuery Magie:

$(function(){ 
$('a[data-action="dirDom"]').click(function(){ 
    $("#dirList").css('display','inline').removeAttr('class').addClass("span12"); 
    $("#fileList").removeAttr('class').css("display","none"); 

}); 
$('a[data-action="equality"]').click(function(){ 
    $("#dirList").css('display','inline').removeAttr('class').addClass("span6"); 
    $("#fileList").css('display','inline').removeAttr('class').addClass("span6"); 
}); 
$('a[data-action="fileDom"]').click(function(){ 
    $("#fileList").css('display','inline').removeAttr('class').addClass("span12"); 
    $("#dirList").removeAttr('class').css("display","none"); 
}); 

});

Ich habe versucht, es zu animieren, aber hatte nicht viel Glück, aber das funktioniert in Bezug auf eine Größe vollständig sichtbar machen, dann die linke Seite voll sichtbar, und schließlich wieder zu gleichen Größen. Ich bin mir sicher, dass besser JQuery geschrieben werden könnte, aber hey, es ist ein erster Entwurf;)