☰

Bootstrap 3でnavbar-navを正当化する方法 質問する

tag-icon • tag-icon twitter-bootstrap twitter-bootstrap-3 navbar
Bootstrap 3でnavbar-navを正当化する方法 質問する

私は正当化しようとしているnavbarBootstrap 3で（ナビゲーションバーのコンテンツを引き伸ばす）クラスmargin: 0 auto; max-width: 1000px;を追加しnav*、container要素を親として追加しようとしましたul。最後のチェックとして、提案されたことを実行しました。この回答ではnavbar-justifiedクラスに追加することで実現しnavbarましたが、これにより、ナビゲーション バー全体が揃えられずに、すべてが左側に詰め込まれてしまいました。

を実行すると中央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。

ベストアンサー1

次のようにして、ナビゲーション バーのコンテンツを揃えることができます。

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

これをライブでご覧ください:http://jsfiddle.net/panchroma/2fntE/

おすすめ記事