jquery - 如果没有其他列，我想扩展该列以适合屏幕

Question

我正在使用 Bootstrap 。我从 json 获取数据。我最多可以有 6 个表，我都将它们放在一行中，如下所示。

  <div class="row">
        <div class="col-sm-6 col-xs-12"></div> (table one)
        <div class="col-sm-6 col-xs-12"></div> (table two)

        <div class="col-sm-6 col-xs-12"></div> (table three)
        <div class="col-sm-6 col-xs-12"></div> (table four)

        <div class="col-sm-6 col-xs-12"></div> (table five)
        <div class="col-sm-6 col-xs-12"></div> (table six)
    </div>

我希望在没有表 3 的情况下，四张大开以适应屏幕，就像总和为 12 一样。我该怎么做？

Answer 1

查找表数/12 得到列。可能需要做余数检查来做偏移量或其他事情，以防万一表的数量是 5 ...无论如何那应该让你有一个开始的想法。一个

var tableCount = $('table').length; 
var maxColCount = 12; 
var rowWidth = maxCol/tableCount // eg 4 table / 12 row = 3 

var str = ' <div class="row">'; 
for(var i = 0; i < tableCount; i++) {
    str .= '<div class="col-sm-'+ rowWidth +' col-xs-12"></div>';
}
var str .=  '</div>';

consoloe.log(str);

PS: 哎呀我没看到json部分......总之......