0

我正在使用 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，但这给了我一些编译器错误。

4

2 回答 2

2

这是一个快速的 jsfiddle ( jsfiddle )，我在 .row 和 .container 上使用背景颜色来显示正在发生的事情。我在您的代码结构中使用了两个 span6，如果您只需要一个 span6，只需删除另一个。至于边框，您必须在 .thumbnail 类上同时调整 box-shadow 和边框，因为 box-shadow 在边框的外观中起着一定的作用。

这是另一个不使用s/ s 的 jsfiddle ( 2nd jsfiddle ) ，但确实使用并将类放入网格中。在这个版本中，缩略图以 span6 为中心。ulli.row-fluid.thumbnails

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

希望这些示例中的一个可以引导您找到答案。我可以帮助您完全按照您的意愿工作，但我需要了解更多细节。如果我做的小提琴对你没有帮助，请让我知道更多细节不起作用，我会尽力让你完成剩下的工作。特别是，每行有多少个拇指，大小是多少（这无关紧要，但对示例有帮助），您是否使用两个 span6？基本上是两列？还是您只为图像使用一个 span6？类似的东西。

于 2012-07-20T01:15:36.447 回答
0

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

于 2012-07-24T00:51:06.730 回答