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 的填充，这一切都会中断，因为我正在缩小使用像素宽度的固定网格的空间。我明白了，所以我尝试了流体布局。

这会使用我想要的排水沟正确格式化网格 - 但是......它会在其他地方引起问题。在我的狭窄内容中，我实际上有这个（为简洁起见，删除了 a 和 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;
 }

由于这显然不适用于第二行中的第一张图像，因此它与其他缩略图（用于间距）具有相同的边距并与顶行对齐。

所以我正在寻找解决这两个问题的方法。我希望使用固定布局，但如果有人能解决缩略图问题，我会很乐意使用流动布局。

遇到此问题的任何人都有解决方案吗？

干杯!

4

1 回答 1

0

我不建议填充containerorrow类，它会抛出整个引导网格。将填充直接应用于span*类divs。

于 2012-11-27T15:41:25.077 回答