我必须编写一个html查看器,它接受一些对象作为输入,并提供一个很好的html布局。对于布局部分,我决定使用twitter引导2.3
先决条件
现在,我想要的是一个“自动调整”的布局,能够以最方便的方式取代屏幕上的对象。这一概念在以下图像中作了概述:
在左侧的上,您可以看到对象,在右侧的上,需要的最终偏移。我差一点就能用这样的方法:
<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>
但是在第二行,由于引导css的margin-left
设置,我得到了一个糟糕的“倾斜-右”效果。
我还试图重写span
的css规范,以采用保证金-右驱动的方法,但没有运气(如果有趣的话,我可以提供有关这种方法的信息)。有什么建议吗?
发布于 2013-08-06 20:29:44
您可以通过使用引导程序和:nth-child
伪选择器来实现这一点。但是,要完成这一任务,还需要将CSS更改超出简单的.span
的左边框.您可能需要使用较小的@media
查询重新调整这一点,这可能超出了这个问题的范围,以向您展示如何完成所有这些操作……这应该会让您进行如下操作:
这是一个jsFiddle
上面的小提琴已经上膛了..。我正在用类.row-fluid
制作一个容器,在这个容器中,我要添加许多.span6
,但我也要确保在第三个和每两个.span6
上,它要删除左边框,这样它就可以每一行堆叠两个.span6
和两个.span6
。
您可以阅读更多关于:nth-child
伪选择器的内容。
https://stackoverflow.com/questions/18085114
复制相似问题