ブートストラップが取り付けられています。幅がコンテナとボディを超えています。

Question

オリジナルPOST

添付されたnavbarに問題があります。 スクロールすると、ナビゲーションバーの幅が拡大し、コンテナとボディの幅を超えます。実際には、画面

を使い果たし、この私のHTML

<header> 
    <div class="container"> 

    <div class="encabezado row"> 
     <img class="img-responsive encabezado-pict" src="img/header.jpg"> 
    </div> 

    <!-- ===================================== --> 
    <!-- ============ NAV BAR ================ --> 
    <!-- ===================================== --> 
     <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> 
          <li><a href="#">Origen Bicéfalo</a> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown" class="dropdown" class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Normatividad <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Ley de profesiones</a> 
          </li> 
          <li><a href="#">Reglamento a la Ley de profesiones</a> 
          </li> 
          <li><a href="#">Estatutos</a> 
          </li> 
          <li><a href="#">Código de Ética</a> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Servicios <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Afiliación</a> 
          </li> 
          <li><a href="#">Bolsa de empleo</a> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown" class="dropdown" class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Académicos <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Certificación</a> 
          </li> 
          <li><a href="#">Café Técnico</a> 
          </li> 
          <li><a href="#">Congresos</a> 
          </li> 
          <li><a href="#">Convenios</a> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Estudiantiles <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Servicio Social y Prácticas</a> 
          </li> 
          <li><a href="#">Conlami Universitario</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
     </nav> 
    </div> 
</header> 

そして、私は、静的な幅を与えるためにしようと試み、この私のCSS

.affix { 

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

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

であるが、それは応答しないのです。

とても感謝します。

私はそれ以外の場合は取る、右

<header> 

後、私はコンテナが自分のWebヘッダに箱入りの外観を与えるためにすることを使用し、問題がこの

<div class="container"> 

であることを発見したEDITED

伸びた外観。

私はタフトコンテナを取り外すと、固定されたナビゲーションバーが画面に完全にフィットすることに気付きました（1391ピクセル）。

しかし、コンテナがそこにあるとき、固定のnavbarはまったく同じ幅（1391px）をとり、navbarは画面外で使い果たします。

この問題の解決方法をご存知ですか？

Answer 1

container-fluidからcontainerに変更しても問題ありません。