Question

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

到目前为止，我尝试过一些事情：

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

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

.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;
}

Answer 1

您只需制作<div class="center"> span9，并删除额外的li。

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

水平居中使用奇数跨度宽度的Bootstrap元素

1 个答案: