Rozdzielacz do Twittera Bootstrap

Question

Jaki jest najlepszy sposób, aby umożliwić użytkownikowi dynamiczną zmianę szerokości kolumn na stronie tytułowej Bootstrap?

Na przykład, aby dodać pionowy dzielnik/rozgałęźnik w poniższym przykładzie?

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

Answer 1

Nie wierzę, że to bootstrap sposób obecnie, jednak można dodać klasę do jednego z div, które stawia border-left:1px solid #EEE lub border-right:1px solid #EEE. Jedyny problem z tym rozwiązaniem to twoja łączna rozpiętość 12 będzie teraz większa niż normalna szerokość span12 o 1 piksel i popchnie jeden z elementów div do następnego wiersza. Jeśli jest to dopuszczalne, możesz to naprawić, robiąc drugi dział tylko span5, więc twoja suma wynosi span11 + 1px.

Byłoby miło, gdyby bootstrap miał klasę, która nie zakłócałaby normalnego systemu siatki.

Answer 2

Jeśli nie masz nic przeciwko temu, że nie jest on animowany lub dynamicznie regulowany, oto coś, nad czym pracowałem na podobnym poziomie z Bootstrap (używam wersji 2.1.0, ale powinno działać w wersjach 2.x):

Konfigurowanie grupy przycisków:

<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> 

a oto magia JQuery:

$(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"); 
}); 

});

Próbowałem ją ożywić, ale nie miałem szczęścia, ale działa to pod warunkiem, że jeden rozmiar jest w pełni widoczny, a potem lewa strona w pełni widoczna, a na końcu z powrotem do równych rozmiarów. Jestem pewien, że lepsze JQuery można napisać, ale hej, to jest pierwsza wersja;)