boxed navbarを貼り付けるには

Question

私はスクロール時にnavbarを固定するために接辞を使用しています。

しかし、スクロールナビがうまく動作しないとき。

私は<header class="container">を使用して、ボックスの外観をヘッダーのWebサイト、つまり中心のコンテンツにします。

コンテナなしのヘッダーを使用すると、ヘッダーとメニューが画面の左右に収まるようになります。この場合、貼り付けられたnavbarは同じように（1391pxの幅をとって）スクリーンをフィッティングしてうまく動作します。

ただし、<header class="container">を使用しています。また、1391pxの幅をとっているため、貼り付けられたnavbarが画面外になります。それがサイド・ツー・サイドのウェブサイトであるかのように。コンテナの幅には適応しません。

解決方法をご存知ですか？

または

は、ブートストラップ接辞がちょうど延伸サイトや無箱入りのサイトの最新デザインであることそれはありますか？

これはNAV

<header class="container"> 
    <nav id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="222"> 
      <div class="container-fluid"> 
      <div class="navbar-header"><a class="navbar-brand" href="#">Home</a> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 navbar-menubuilder"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="dropdown" class="dropdown"><a href="3" class="dropdown-toggle" data-toggle="dropdown">Nosotros <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Misión, Visión y Objetivos</a> 
          </li>      
         </ul> 
        </li>      
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

のための私のHTMLであり、これは、それは私に何が起こっているかに似て見hereを取るCSS

header{ 
     border-top-width: 8px; 
     border-top-style: solid; 
     border-top-color: #888; 
    } 
    .affix { 

      position: fixed; 
      top: 0; 
      width: 100%; 
      z-index: 1; 
      right: 10%; 
      left: 10%; 
      } 

    .affix + .container-fluid { 
      padding-top: 70px; 


    } 

です。結果の画面を小さく、大きくして、何が起こるかを確認してください。

Answer 1

コードなしでは、コードはどのように見えますか？

twitterのブートストラップのnavbar fixed navbarの例を使用すると、.navbar-fixed-topの右と左の値を変更する必要があります。 0を使用すると、左右に設定されます。 （あなたは、ことなどを持っているの例えば.navbar右用）それらすべて整列させるためにその後

@media (min-width: 768px) { 
    .navbar-fixed-top { 
     position: fixed; 
     right: auto; 
     left: auto; 
    } 
} 

、ブートストラップのマージンを上書きする必要があります。あなたが＃のnav.affixは、コンテナのサイズをフォローしたい、より大きな画面でhttps://jsfiddle.net/jennift/o7utddud/2/

Answer 2

：

はフィドルを参照してください。左右に0を使用すると、コンテナをガイドとして使用し、コンテナと同じ幅で「伸ばし」ます。

小さな画面では、コンテナの幅が「auto」になり、固定位置では左から右に伸びます。 20pxのパディング（ブートストラップCSSによって使用される）を使用して、ヘッダコンテナの長さにそれを再調整することができます。

#nav.affix { 
    position: fixed; 
    top: 0; 
    left:0; 
    right:0; 
} 

@media (max-width: 767px) { /*controls on smaller screen*/ 
    #nav.affix { 
     left:20px; /*20px to follow bootstrap body padding */ 
     right:20px; 
    } 
} 

フィドル：http://jsfiddle.net/jennift/hnkutxsn/3/