Question

如何将我的所有网站内容与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>

Answer 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现在提供了一个“以分页为中心”的课程，但它并不适用于你想要实现的目标。

Answer 2

添加课程。

.center {margin：0 auto;}

使用Bootstrap将所有网站内容居中

2 个答案: