Я хочу развернуть столбец, чтобы соответствовать экрану, если нет другого столбца

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> 

Я хочу, чтобы четыре были широко открытыми, на экране, как на сумму 12, когда нет таблицы три. Как я могу это сделать?

Answer 1

найти номер стола/12 для получения col. prob нужно сделать проверку остатка, чтобы сделать смещение или что-то только в случае, если число таблицы равно 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: OPPS я did't увидеть JSon часть ...... в любом случае ....