複数のナビゲーションバー：最初の1つを表示

私はウェブアプリケーションの中で、ブートストラップ3を使ってナビバーに表示したいと思います。次のコードを使用しています。基本的に2つのセクションがあり、最初は固定トップ、もう1つは静的トップです。複数のナビゲーションバー：最初の1つを表示

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <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 pull-right"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
    </ul> 

    </div> 
</div> 
<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <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="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
    </ul> 
    <button type="button" class="btn btn-default navbar-btn">Button</button> 
    <div class="col-sm-3 col-md-3 pull-right"> 
     <div class="navbar-text">Text</div> 
    <form class="navbar-form" role="search"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
     <div class="input-group-btn"> 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
     </div> 
    </div> 
    </form> 
    </div> 

    </div> 
</div>

問題は最初のものだけが表示されていることです。助言がありますか？

出典

2016-08-26 wiwa1978

第2のナビゲーションバーの最初の値を最初の高さに設定してください。私は、オーバーレイされ、固定されているものが一番上にあると推測します。

出典

2016-08-26 12:12:15 Inselbaer

どうすればよいでしょうか。あなたはCSSファイルの値を変更することを指していますか？ – wiwa1978

2つの方法があります： 1）2番目のNavbarのマージントップを最初のナビゲーションバーの高さの値に設定します。 2）2番目のナビゲーションバーのトップCSS属性を1番目（固定）のナビゲーションバーの高さに設定します。 – Inselbaer

あなたはbodyタグにパディングトップを追加する必要がある最初のナビゲーションバーが固定されているとして、あなたはボディのパディングが必要

ブートストラップサイト上の参照を見つけることができます http://getbootstrap.com/components/#navbar

特定され

::その

<body>の上部にパディングを追加しない限り、固定ナビゲーションバーがあなたの他のコンテンツをオーバーレイします。あなた自身の価値観を試してみるか、下記のスニペットを使用してください。ヒント：デフォルトでは、navbarは50ピクセル高いです。コピー

body { padding-top: 50px; }

出典

2016-08-26 12:32:43 Axe

複数のナビゲーションバー：最初の1つを表示

答えて

関連する問題