1

我不知道如何措辞这个问题。我试图弄清楚如何添加一个空白元素来填充.row假设用户创建了一些元素。这是一个小提琴。

 //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 列行（使用引导程序），您显然会添加.span3到每个行，div.element但是因为它是一个四列布局并且有三个div.element我如何添加一个空白元素。

请记住，这不仅适用于 4 列布局，而且不只是 3 div.element，另一个示例是保留 4 列布局，但假设我们只有 2 列， div.element那么我们需要添加 2 个空白元素。

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

解决方案：在@Trevor 的帮助下，我想出了一个很好的解决方案，它非常干净且实用。

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

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

4

1 回答 1

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/

于 2013-09-26T15:30:34.410 回答