Splitter para Twitter Bootstrap

Question

¿Cuál es la mejor manera de permitir al usuario cambiar dinámicamente el ancho de las columnas de una página de estilo Twitter Bootstrap?

Por ejemplo, para agregar un divisor/divisor vertical en el siguiente ejemplo?

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

Answer 1

No creo que hay una manera de arranque en la actualidad, sin embargo, puede agregar una clase a uno de sus divs que pone border-left:1px solid #EEE o border-right:1px solid #EEE. El único problema con esta solución es que su intervalo combinado de 12 ahora será más que el ancho span12 normal en 1px y empujará uno de los divs a la siguiente línea. Si es aceptable, puede solucionarlo haciendo el segundo div solo span5, por lo que su total es span11 + 1px.

Sería bueno si bootstrap tuviera una clase para esto que no interfiriera con el sistema de grilla normal.

Answer 2

Si no te importa que no sea animado o dinámicamente ajustable, he aquí algo en lo que he estado trabajando de manera similar con Bootstrap (estoy usando 2.1.0, pero esto debería funcionar en cualquier versión 2.x):

Establecer un grupo de botones:

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

Ahora, aquí está la magia de 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"); 
}); 

});

He estado tratando de animarlo, pero no he tenido mucha suerte, pero esto funciona en términos de hacer un tamaño completamente visible, luego el lado izquierdo completamente visible, y finalmente volver a tamaños iguales. Estoy seguro de que se podría escribir mejor JQuery, pero bueno, es un primer borrador;)