Twitter Bootstrap 2.0。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
中央揃えに最適な方法は何ですか.nav
内部navbar-inner
?
私は自分のCSSスタイルを追加することを思いついただけです:
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
ナビゲーションバー内のコンテナーの幅をauto
から960px
にオーバーライドします。
.navbar-inner .container {width:960px;}
それを動的な幅で中央に揃えるために、私は以下を使用しました:
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>
CSS:
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}
テストしませんでしたが、display:inline-block;
は問題である可能性があり、IE7以下を除くすべてのブラウザーでサポートされています。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
http://Twitter.github.com/bootstrap/components.html#navbar のようにコンテナークラスを使用するだけで、私のナビゲーションが中心になります。ただし、幅は固定されており、書式設定はオフになっています(ナビゲーションバーの高さが増加し、私が間違っている可能性があります)。
サポートされているデバイスの最小画面サイズとラップなしに基づいて、最小幅の流動的なパーセンテージベースの幅でナビゲーションを中央揃えにすると便利です。 (私はレスポンシブメディアクエリに関して初心者ですが、おそらくパーセンテージベースのより良い代替手段です。)
最小幅とnowrapを調査していますが、bootstrapコンテナクラスの固定幅の別の代替方法は、navbar-innerの子を追加することです。組み込みかどうかを知りたいのですがbootstrap row-fluidやspanNクラスなどのソリューションですが、ナビゲーション内で正しくフォーマットすることもできませんでした。
<div style="margin-left: 15%; margin-right: 15%;">
私はこれが便利できれいであるとわかりました:
<div class="navbar navbar-fixed-top">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
ここで、cssは次のとおりです。
.container {left:auto;right:auto}
これは、divを現在のナビゲーションバーの幅のベースに中央揃えします。
応答性は別々に管理されます。