Splitter for Twitter Bootstrap

Question

What is the best way to enable the user to dynamically change the width of columns of a Twitter Bootstrap styled page?

For instance, to add a vertical divider/splitter in the following example?

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

Answer 1

If you don't mind it not being animated or dynamically adjustable, here's something I've been working on similar to this with Bootstrap (I'm using 2.1.0, but this should work in any 2.x versions):

Set up a button group:

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

Now, here's the JQuery magic:

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

});

I've been trying to animate it, but haven't had much luck, but this works in terms of making one size fully visible, then the left side fully visible, and finally back to equal sizes. I'm sure better JQuery could be written, but hey, it's a first draft ;)

Answer 2

I don't believe there is a bootstrap way currently, however you can add a class to one of your divs which puts border-left:1px solid #EEE or border-right:1px solid #EEE. The only problem with this solution is your combined span of 12 will now be more than the normal span12 width by 1px and it will push one of the divs to the next line. If it is acceptable to do so you can fix this by making the second div only span5 so your total is span11 + 1px.

It would be nice if bootstrap had a class for this that did not interfere with the normal grid system.