首页 文章

Twitter引导程序无法使用固定网格填充容器

提问于
浏览
0

我试图在容器和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 回答

  • 0

    我不建议填充 containerrow 类,它会抛出整个引导网格 . 直接将填充应用于 span* class divs .

相关问题