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（jsfiddle），我在.row和.container上使用背景颜色来显示正在发生的事情。我使用了两个span6和你的代码结构，如果你只需要一个span6，只需删除另一个。至于边框，你必须在.thumbnail类上调整box-shadow和border，因为box-shadow在边框的外观中起作用。

这是另一个jsfiddle（2nd jsfiddle），它不使用ul s / li，但使用.row-fluid并将.thumbnails类放入网格。在此版本中，缩略图位于span6的中心。

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

希望其中一个例子可以帮助您找到答案。我可以帮助你完全按照自己的意愿工作，但我需要了解更多细节。如果我所做的小提琴没有帮助你，请让我知道什么是没有更多的细节工作，我会尽力让你完成剩下的工作。特别是，每行有多少拇指和大小（它不相关，但有助于示例），你使用的是两个span6吗？基本上两列？或者你只使用一个span6为您的图像？这样的东西。

Answer 2

好的 - 抱歉。现在知道，这只是我的愚蠢。我可以向所有使用Twitter Bootstrap的人推荐一件事：了解row和`row-fluid之间的区别。 ; - ）

CSS - Twitter Bootstrap：中心缩略图网格并从链接/图像中删除边框？

2 个答案: