我试图在容器和Twitter引导程序站点的网格之间获得一些填充(一个装订线) .
<div class="container">
<div class="row">
<div class="span4">
Some narrow content
</div>
<div class="span8">
Some wider content
</div>
</div>
</div>
如果我在.container上放一个10px的填充,那么它都会中断,因为我缩小了使用像素宽度的固定网格的空间 . 我明白了,所以我尝试了流畅的布局 .
这样可以正确地使用我想要的装订线格式化网格 - 但是......它会在其他地方引起问题 . 在我的狭隘内容中,我实际上有这个(为了简洁,删除了一个和img,但它们都是相同的大小):
<ul class="thumbnails">
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
在固定的布局中,它完美地包装成一个漂亮的方形2x3网格图片 . 在一个流畅的布局中,我在顶行获得了2个图像,然后一个图像在剩下的方向略微缩进 - 我的漂亮的缩略图网格被打破了 . 一些研究表明,流体布局在缩略图上具有动态边距,第一个是符合这个特殊的CSS代码:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
由于这显然不适用于第二行中的第一个图像,因此它获得与其他缩略图相同的边距(用于间距)并与顶行对齐 .
所以我正在寻找解决这两个问题的方法 . 我希望使用固定的布局,但如果有人能解决缩略图问题,我会愉快地使用流畅的布局 .
遇到这种情况的人有解决方案吗?
干杯!
1 回答
我不建议填充
container
或row
类,它会抛出整个引导网格 . 直接将填充应用于span*
classdivs
.