Splitter cho Twitter Bootstrap

Question

Cách tốt nhất để cho phép người dùng tự động thay đổi chiều rộng của các cột của một trang theo kiểu Twitter Bootstrap là gì?

Ví dụ: để thêm bộ chia/chia dọc theo ví dụ sau?

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

Answer 1

Tôi không tin rằng có một cách bootstrap hiện nay, tuy nhiên bạn có thể thêm một lớp học để một trong div của bạn trong đó đặt border-left:1px solid #EEE hoặc border-right:1px solid #EEE. Vấn đề duy nhất với giải pháp này là khoảng kết hợp 12 của bạn bây giờ sẽ lớn hơn chiều rộng span12 bình thường 1px và nó sẽ đẩy một trong các div đến dòng tiếp theo. Nếu nó được chấp nhận để làm như vậy bạn có thể sửa lỗi này bằng cách làm cho div thứ hai chỉ span5 để tổng số của bạn là span11 + 1px.

Sẽ rất tuyệt nếu bootstrap có một lớp cho điều này không ảnh hưởng đến hệ thống lưới bình thường.

Answer 2

Nếu bạn không nhớ nó không hoạt động hoặc được điều chỉnh động, đây là điều tôi đã làm việc tương tự với Bootstrap (Tôi đang sử dụng 2.1.0, nhưng điều này sẽ hoạt động trong bất kỳ phiên bản 2.x nào):

Thiết lập một nhóm nút:

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

Bây giờ, đây là sự kỳ diệu 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"); 
}); 

});

Tôi đã cố gắng tạo hiệu ứng cho nó, nhưng không có nhiều may mắn, nhưng điều này có tác dụng làm cho một kích thước hoàn toàn có thể nhìn thấy, sau đó nhìn thấy bên trái, và cuối cùng trở lại kích thước bằng nhau. Tôi chắc chắn rằng tốt hơn JQuery có thể được viết, nhưng hey, đó là một dự thảo đầu tiên;)