javascript - Bootstrap : show/hide column divs with checkbox and change column span

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

}

Demo in jsFiddle

更新:

如果您想对多个相同的行进行操作，只需使用选择器找到所有这些行，然后在每个 行上调用一个函数:

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

Updated Fiddle