0

ブートストラップ 3x を使用しています。私は次のナビゲーションバーを持っています:

<div class="navbar" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
            <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="navbar-collapse collapse" id="nav-secondary">
          <ul class="nav nav-pills nav-justified">
            <li style="border: 1px solid grey"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

コンテナ クラスを使用すると<div class="container"> 、多くのパディングが表示されます。これは、より大きな解像度ではさらに悪く見えます。それを使用nav-justifedしても、メニューが中央に配置されているように見えます。このスクリーンショットはそれをより明確にすることができます

パディングあり

しかし、このパディングを避けて、メニューが次のようにスペース全体を占めるようにしたい:

全空間

2枚目の画像は<div class="container">コメントした時のものです。私がまだ得ているパディングは.navbarクラスからのものだと思いますが、それでもまだ優れています。しかし、ナビゲーションバーから を削除して<div class="container">も問題ないのでしょうか。また、私はまだパディングを取得しているので、私の質問は次のとおりです。

  1. を削除しても<div class="container">よろしいですか？
  2. ここでより良いと思われるCSSベースのソリューションを手伝ってもらえますか?

編集：

幅が変更された PrintScreen: CSS が変更されました

4

2 に答える 2

0

この.containerクラスは、レスポンシブな静的幅の両方を強制していますが、これがこの動作を引き起こしていますが、両側でフレームワークと一貫したパディングと自動的に計算されたマージン ( margin-left: auto; margin-right: auto) も提供しています。それを取り除くのは良い考えではありません。

幅を制限すること (通常は max-width を介して) が通常は望ましいことを理解してください。幅を制限せずにナビゲーションを正当化すると、より大きな画面 (27 インチの Thunderbolt ディスプレイなど) ではうまく機能しない可能性があるためです。.full-widthコンテナにクラスを追加してから、 target.container.full-widthと setを追加することでコアを拡張できますwidth: auto. ただし、Bootstrap のコアを変更するのではなく、これらすべてを別のスタイルシートで行うようにしてください:

HTML

<div class="navbar" role="navigation">
  <div class="container full-width">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
        <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="navbar-collapse collapse" id="nav-secondary">
      <ul class="nav nav-pills nav-justified">
        <li style="border: 1px solid grey"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>


CSS

.container.full-width {
  width: auto;
}

コアをオーバーライドしているため!important、特定の問題を回避するために追加することもできますが、以下の Codepen はその必要性を示していません。覚えておいてください。

最後に、Bootstrap の正当なナビゲーション機能を使用すると、現在のバージョンの Chrome と Safari で問題が発生することが指摘されているため、使用する前によく考えてください。

こちらがコードペンです。

于 2013-11-13T15:17:48.770 に答える