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

そして、必要に応じて「pull-center」クラスを使用します (「container-fluid」の方がうまく機能します)。

<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 に答える