2013-12-09 16 views
5

私のウェブページのフッターは中央に揃えられています。ブートストラップフッターのテキストが中央に揃う

<div id="footer"> 
    <div class="container"> 
    <p class="text-muted credit" style="color:#fff">xyz</p> 
    </div> 
</div> 

このコードは他のページでも機能しますが、この特定のページでは機能しません。このページには私が接続しているフルカレンダーのUIが含まれていますが、私の問題に関係することは疑いがあります。

+0

containerないがそれをしようとした使用:だから、このようなものを持っている必要があります。それはプラグインとは関係ありません。 –

+0

ブートストラップ3.0 cssです。 –

+0

ok私はちょうどそれをハードコーディングしていますが、何らかの理由でコンテナ内のテキストが通常の状況で左に浮いています(または他の方法)。しかし、この場合はそうではありません。プラグインをもう一度見てみよう –

答えて

20

"text-center"クラスをコンテナに追加してみてください。だからこれで終わるでしょう:

<div id="footer"> 
    <div class="container text-center"> 
    <p class="text-muted credit" style="color:#fff">xyz</p> 
    </div> 
</div> 

それが動作するかどうかを確認してください。それ以外の場合は、ページのマークアップを貼り付けて見てください。たとえば、フッター要素をchromeで検査し、そのスクリーンショットを添付した場合にも役立ちます。

4

ブートストラップ3の私にとっては、col-md-12 col-sm-12とcol-xs-12を使用することを忘れないでください。

他のものを使用しないでくださいstyle="color:#fff"それは色のテーマを壊します。代わりにnavbar-textを使用してください。 、

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
    <div class="container text-center"> 
     <p class="navbar-text col-md-12 col-sm-12 col-xs-12">&copy; xyz</p> 
    </div> 
</nav> 

最終単語container-fluid

+0

私は多くの場所でcol-xs-12がデフォルトで小さな画面に適用されると思っていました。私は同じ問題を抱えている。 –