首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用twitter引导自动调整"span“类

使用twitter引导自动调整"span“类
EN

Stack Overflow用户
提问于 2013-08-06 16:03:23
回答 1查看 1.2K关注 0票数 0

我必须编写一个html查看器,它接受一些对象作为输入,并提供一个很好的html布局。对于布局部分,我决定使用twitter引导2.3

先决条件

  • 对象表示为不同大小的divs
  • 我不知道预先显示的div的

现在,我想要的是一个“自动调整”的布局,能够以最方便的方式取代屏幕上的对象。这一概念在以下图像中作了概述:

左侧的上,您可以看到对象,在右侧的上,需要的最终偏移。我差一点就能用这样的方法:

代码语言:javascript
运行
复制
<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规范,以采用保证金-右驱动的方法,但没有运气(如果有趣的话,我可以提供有关这种方法的信息)。有什么建议吗?

EN

回答 1

Stack Overflow用户

发布于 2013-08-06 20:29:44

您可以通过使用引导程序和:nth-child伪选择器来实现这一点。但是,要完成这一任务,还需要将CSS更改超出简单的.span的左边框.您可能需要使用较小的@media查询重新调整这一点,这可能超出了这个问题的范围,以向您展示如何完成所有这些操作……这应该会让您进行如下操作:

这是一个jsFiddle

上面的小提琴已经上膛了..。我正在用类.row-fluid制作一个容器,在这个容器中,我要添加许多.span6,但我也要确保在第三个和每两个.span6上,它要删除左边框,这样它就可以每一行堆叠两个.span6和两个.span6

您可以阅读更多关于:nth-child 伪选择器的内容。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18085114

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档