Bootstrap：显示/隐藏带有复选框的列 div 并更改列跨度

Question

我正在使用 Bootstrap 3.2。我试图弄清楚是否有一种方法可以显示/隐藏“col-sz-#”div 并更改可见 div 中的“col-sz-#”类，以使用复选框样式按钮调整它们的大小以适合容器每列。

例如，如果我从

<div class="row">
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
</div>

然后，如果隐藏其中 2 个，而其他则调整大小：

<div class="row">
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

如果总列数不能像 5 那样整除 12，那么它就不会改变。

Answer 1

你可以这样做：

var $myCols =  $("#myColumns");

$("#toggleColumns input").change(function() {
    var index = +this.value - 1;
    var visible = this.checked;

    $($myCols.children().get(index)).toggle(visible);

    resizeColumns();
});

function resizeColumns() {
    var visibleCols = $myCols.children(":visible").length;

    var div = Math.floor(12 / visibleCols);
    var rem = 12 % visibleCols;

    var colSize = (rem === 0) ? div : 2;

    $myCols.children().removeClass().addClass('col-md-'+colSize);

}

jsFiddle 中的演示

更新：

如果您想对多个相同的行进行操作，只需使用选择器找到所有行并在行上调用函数即可each：

$(".resizeRow").each(function(){
    var $eachRow = $(this);
    // Do Stuff
});

更新了小提琴