3

这似乎是 Bootstrap 社区中的一个常见问题，例如，居中过程和跨度宽度为奇数的类class="span3"。我有一个里面.row有三个.span3类。我意识到只使用三个span4类会更容易，但我不喜欢它使我的元素有多大。

到目前为止，我已经尝试了一些事情：

  1. 我创建了一个自定义的 15 列网格，因此我可以.span3在我实际想要使用的三个元素之前和之后给出一个类，但是当responsive-bootstrap.css启动时，事情表现得很奇怪，因为响应文件处理一个 12 列网格。

  2. 我尝试将所有内容放在.center使用以下 CSS 的自定义类中：

    .center {
    float: none;
    margin: 0 auto;
    text-align: center;
}

对于它的价值，当我的浏览器宽度在 ~980px - ~1199px 之间时，一切正常。

必须有一个简单的方法来解决这个问题，对吧？我也不担心它在旧浏览器上看起来不错，这是一个个人网站。这是我目前所在的位置，使用 15 列网格：

这是我的JSFiddle

的HTML：

<div class="row">
    <div class="center">
           <ul class="thumbnails" id="portfolio-links">
                <li class="span3"></li>
                <li class="span3" id="item1">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3" id="item2">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3" id="item3">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3"></li>
           </ul><!--/.thumbnails-->
    </div><!--/.center-->
</div><!--/.row-->

CSS：

#portfolio-links {
    display: block;
    margin: 0 auto;
    float: none;
}
.center {
    float: none;
    margin: 0 auto;
    text-align: center;
}
4

1 回答 1

2

你只需要制作<div class="center">一个大小为 的span9并删除多余的li。

最终结果将是：http: //jsfiddle.net/AKWqP/

于 2013-03-09T18:12:10.570 回答