添加一个空白元素来填充空间？

我不知道如何说出这个问题。我想知道如何添加一个空白元素来填充.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列行（使用引导程序），你会明显增加.span3每个div.element但因为它是一个四列布局并有三个div.element如何添加一个空白元素。

请记住，它不只是一个4列的布局，并不只是3 div.element，另一个例子将保持4列布局，但说我们只有2 div.element然后我们需要添加2个空白元素。

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

解决方案：使用@Trevor的帮助我提出了一个很好的解决方案，它非常干净和功能强大。

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

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

来源

2013-09-26 Michael Joseph Aubry

我很困惑，这有什么错只是有''

为空白？ – MackieeE

如果用户生成说1元素，然后选择一个4列布局，我需要3个空白元素..我需要写一个if语句或东西来说，如果每个元素的索引不== == span列然后添加x空白元素的数量。只是不确定如何去做。 –

您的意思是？ http://jsfiddle.net/tnpuK/3/ – mattytommo

我不太清楚你在与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-26 15:30:34 Trevor

不错，这绝对看起来像一个巨大的一步，我明白这两列看起来很奇怪，我需要重新思考，因为通常一个2 col会有自己的行我很肯定，我可能不得不弄清楚，如果用户添加三元素和想要一个2 col布局...我想只是在第一列保留2个元素，然后在右边的剩余部分..因此，保持2 span6不是4. –

是的三个元素的2列将创建两行。但是，除第一个div外，左边距被添加到每个div。所以如果你想要两行，你必须确保你为每一个新行取走了左边距。 – Trevor

是的，这就是我在更新的小提琴中所做的...我想它是一个好主意，以保持所有的项目在第一跨度。然后创建剩余的。所以如果有3个'.item'类，然后用户选择2列布局，则所有三个都保留在第一个span6中，新的span6是空白的，然后使用jQuery'.draggable'，这样用户就可以添加任何'.item “他们想要进入第二个span6 ..这是否有意义 –

添加一个空白元素来填充空间？

回答

相关问题