使用twitter bootstrap自动调整“span”类

Question

我必须编写一个html查看器，它将一些对象作为输入，并提供一个漂亮的html布局。对于布局部分，我决定使用 twitter bootstrap 2.3

先决条件

• 对象表示为不同大小的 divs
• 我不知道提前显示的div的数量

现在，我想要的是一个“自动调整”布局，能够以最方便的方式取代屏幕中的对象。概念如下图所示：

左侧

您可以在右侧 所需的最终分区上看到对象。 我几乎以这种方式工作：

<div class="row-fluid">
    <div class="node span6">a box</div>
    <div class="node span6">a second box</div>
    <div class="node span6">a third box</div>
    <!--as much divs as you want-->
</div>

但是在第二行中，由于bootstrap css的margin-left设置，我得到了一个糟糕的“向右倾斜”效果。

我还试图覆盖span的css规范，采用边缘权限驱动的方法，但没有运气（如果有趣的话，我可以提供有关此方法的信息）。 有什么建议吗？

Answer 1

您可以使用bootstrap和:nth-child伪选择器来完成此操作。但是，您要完成此操作还需要将CSS更改超出简单的.span左边距...您可能需要使用较小的@media重新调整此值查询，它可能超出了这个问题的范围，向您展示如何做到这一切，但是...这应该让你去：

Here is a jsFiddle

上面的小提琴加载了bootstrap ...我正在制作一个包含.row-fluid类的容器，其中我添加了许多.span6，但是我我还确保在第三个，然后每两个.span6删除左边距，使其每行堆叠两个.span6。

您可以详细了解:nth-child pseudo selector here