CSS-推特引导:居中缩略图网格和删除链接/图像的边界

Question

我正在使用Twitter Bootstrap创建一个图像网格。这是HTML代码：

<div class="container">
  <div class="row">
    <ul class="thumbnails">
      <li class="span6">
        <a href="x" class="thumbnail">
          <img src="http://www.loremipsum.com" />
        </a>
      </li>
    </ul>
  </div><!-- /.row -->
</div><!-- /.contaner -->

问题：

该网格不在页面的中心，左边距总是小于右边距。

我已经尝试将text-align: center设置为父元素：运气不好。

我也试过

.thumbnails { text-align:center; }
.thumbnails > li > a { display: inline-block; float: none; }

你猜怎么着？运气不好！

使用偏移也没有任何效果。

我能做些什么来使这个网格居中如果需要，我可以提供屏幕截图。

还有，有没有办法从链接中删除边框我已经在thumbnails.less中注释掉了，但不知怎么的，这给了我一些编译器错误。

Answer 1

这里有一个快速的jsfiddle（jsfiddled），我在.row和.contain上使用了背景色来显示发生了什么。我在你的代码结构中使用了两个span6，如果你只需要一个span6就可以去掉另一个。至于边框，您必须调整.t缩略图类上的框阴影和边框，因为框阴影在边框的外观中起着一定的作用。

这里是另一个jsfiddle（第二个jsfiidle），它不使用ul s/li s，但使用.row-fluid并将.thumbnails类放入网格中。在这个版本中，缩略图以span6为中心。

最后一个例子（第三个jsfiddle）使用.row-fluid和一个自定义类.thumbnail-container来包装缩略图并将其放在网格内的中心。如果将.row-fluid嵌套在常规.row中，请记住，流体行需要使用.span12来跨越其所在容器的整个宽度。这是因为流体行使用百分比。

希望其中一个例子能给你一个答案。我可以按照你的意愿帮助你完成这项工作，但我需要了解更多细节。如果我没有帮到你，请告诉我哪些细节不起作用，我会尽力帮你完成剩下的工作。特别是，每行有多少个拇指，大小是多少（这并不相关，但对示例有帮助），你是否使用了两个span6？基本上是两列？还是你的图像只使用了一个span6？诸如此类的东西。

Answer 2

好的-对不起。现在明白了，只是我太笨了。我可以向所有刚开始使用Twitter Bootstrap的人推荐一件事：了解row和"row fluid"之间的区别