0

如何使用 Boostrap 将我的所有网站内容居中（无论浏览器的宽度是多少）？这是一个小提琴，它演示了当我希望它居中时内容如何倾向于向右倾斜：http: //jsfiddle.net/Fqzuu/5/embedded/result/

<div class="container">
    <div id="whitespaceOnLeft" class="span2"></div>
    <div id="allSiteContent" class="span8">
        <h1 class="text-center">My Site</h1>

        <div>I'd like my site's content to all be centered, a common web design paradigm.  However, 'container' seems to skew toward the right; using 'container-fluid' seems to skew toward the left.  (More obvious when you make your browser narrower.)</div>
    </div>

    <div id="whitespaceOnRight" class="span2"></div>
</div>
4

2 回答 2

1

我与 Bootstrap 居中斗争了一段时间，但从未找到完美的响应式解决方案。

我发现最好的解决方案是将其添加到我的 CSS 中：

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

然后根据需要使用“拉中心”类（“容器流体”效果更好）：

<div class="container-fluid">
    <div id="whitespaceOnLeft" class="span2"></div>
    <div id="allSiteContent" class="span8 pull-center">
        <h1>My Site</h1>

        <div>I'd like my site's content to all be centered, a common web design paradigm.  However, 'container' seems to skew toward the right; using 'container-fluid' seems to skew toward the left.  (More obvious when you make your browser narrower.)</div>
    </div>

    <div id="whitespaceOnRight" class="span2"></div>
</div>

这是小提琴：

http://jsfiddle.net/skelly/bGFSz/

我还发现 Bootstrap 现在提供了一个“以分页为中心”的类，但它并不真正适用于您想要实现的目标。

于 2013-03-11T19:33:15.380 回答
0

添加一个类。

.center {边距：0 自动；}

于 2013-05-27T07:29:04.100 回答