web-dev-qa-db-ja.com

TwitterのCenter Navbar Bootstrap 2.0

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;
    }
}
cssnavigationtwitter-bootstrapresponsive-designcentering
23
opengrid

ナビゲーションバー内のコンテナーの幅をautoから960pxにオーバーライドします。

.navbar-inner .container {width:960px;}
5
James Lawruk

それを動的な幅で中央に揃えるために、私は以下を使用しました：

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以下を除くすべてのブラウザーでサポートされています。

http://caniuse.com/inline-block

4
Tim Baas
<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>
3
czlatea

http://Twitter.github.com/bootstrap/components.html#navbar のようにコンテナークラスを使用するだけで、私のナビゲーションが中心になります。ただし、幅は固定されており、書式設定はオフになっています（ナビゲーションバーの高さが増加し、私が間違っている可能性があります）。

サポートされているデバイスの最小画面サイズとラップなしに基づいて、最小幅の流動的なパーセンテージベースの幅でナビゲーションを中央揃えにすると便利です。 （私はレスポンシブメディアクエリに関して初心者ですが、おそらくパーセンテージベースのより良い代替手段です。）

最小幅とnowrapを調査していますが、bootstrapコンテナクラスの固定幅の別の代替方法は、navbar-innerの子を追加することです。組み込みかどうかを知りたいのですがbootstrap row-fluidやspanNクラスなどのソリューションですが、ナビゲーション内で正しくフォーマットすることもできませんでした。

<div style="margin-left: 15%; margin-right: 15%;">
1
s_t_e_v_e

私はこれが便利できれいであるとわかりました：

<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を現在のナビゲーションバーの幅のベースに中央揃えします。

応答性は別々に管理されます。

0
Emiliano Poggi