47

Bootstrap 3 でa を正当化しようとしていますnavbar(navbar のコンテンツを引き伸ばす)。クラスに追加し、要素を親として に追加しようとしmargin: 0 auto; max-width: 1000px;ました。最後のチェックとして、クラスに追加することでこの回答で提案されたことを実行しましたが、これにより、ナビゲーションバー全体を正当化することなく、すべてが左側にまとめられました。nav*containerulnavbar-justifiednavbar

をnav nav-justified ul実行すると中心になりますが、の一部ではないためクラスulのスタイルが保持されず、画面が 768 ピクセルより小さい場合は見栄えがよくありません。navbar-navul

Bootstrap 3 を正当化するにはどうすればよいnavbarですか?

編集：より完全な回答に興味がある人のために、私が本番環境で使用するコードを次に示します。

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

そして、ここに動作する jsFiddle があります。result正しく表示するには、ボックスのサイズを拡大する必要がある場合があります。ナビゲーションを全幅に広げずに実際のリストを中央に配置することに関心がある場合は、David Taiaroa の jsFiddleを参照してください。

4

7 に答える 7

65

以下を使用して、ナビゲーションバーの内容を正当化できます。

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}

このライブを参照してください: http://jsfiddle.net/panchroma/2fntE/

于 2013-09-29T03:08:10.167 に答える
9

すべての要素にfloat: leftデフォルトでプロパティがあることが判明しました。navbar-nav>li以下のコードを追加すると、navbar両方が中央に配置され、くしゃくしゃになりませんでした。

.navbar-nav>li {
        float: none;
}

これが、 a を中心にしようとしている他の誰かに役立つことを願っていますnavbar。

于 2013-09-29T05:31:19.423 に答える
1 
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

そしてcssのために

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

ライブで見るhttp://www.bootply.com/103172

于 2014-03-09T18:11:03.717 に答える