Question

我不确定如何说出这个问题。我试图弄清楚如何添加一个空白元素来填充.row让我们说用户创建一些元素。这是fiddle。

 //User generates the amount of div.element (in this case there is 3)  
 <div class="row">
    <div class="element element1">Element 1</div>
    <div class="element element2">Element 2</div>
    <div class="element element3">Element 3</div>
 </div>

这是在一个12网格布局中，所以假设用户想要这一行是一个4列的行（使用bootstrap），你显然会向每个.span3添加div.element但是因为它是四个列布局，有三个div.element如何添加空白元素。

请注意，它不仅仅适用于4列布局，而且只有3 div.element，另一个例子是保留4列布局，但是我们只有2 div.element然后我们需要添加2个空白元素。

看看FIDDLE看一个例子，我正在努力思考如何处理这个问题但是无法提出解决方案。

解决方案：在@Trevor的帮助下，我提出了一个很好的解决方案，它非常干净且功能齐全。

这是FIDDLE。基本上我决定将所有元素保留在第一行，然后根据选择的列布局即兴添加要添加的列数，然后在选择所需的布局后，元素将是可排序的，可以拖动到选择的任何列中。

非常感谢所有为@Trevor做出贡献的人们。

Answer 1

我不太确定你使用3 div元素和2列布局得到了什么。您是否希望它只显示前两列。

无论如何这里有一个例子可以帮助你开始。

jQuery('button.layout').click(function() {
   jQuery('.temp').remove(); // remove the temporary items
   jQuery('.item').removeClass('span3 span4'); // clean all the classes up
   var spanBlock = jQuery(this).attr('data-span')
   jQuery('.item').toggleClass(spanBlock)
   var columns = 12/parseInt(jQuery(this).data('num'));
   addColumn = columns - parseInt(jQuery('.item').length);
   for(i=0;i<addColumn;i++){
       jQuery('.row-fluid').append('<div class="item item1 temp '+spanBlock+'"></div>');    
   }
})

http://jsfiddle.net/9qh8S/26/

添加空白元素以填充空间？

1 个答案: