2016-05-27 12 views
0

私のドロップダウンメニューがブートストラップ3のこのプロトタイプのボタンとして表示されない理由はわかりませんか?Bootstrap 3 Divの上部にDivsがあるナビゲーションバー?

さらに、ナビゲーションメニューの上にコンテンツを表示するには、これを正しいレイアウトにするにはどうすればよいですか?私はブートストラップCSSを編集せずにこれをやろうとしており、ネイティブでそれを使用しています。ナビゲーションバーの上に何かを置くことについては

http://www.bootply.com/eTDrQdGYJ7

<div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 
<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-4"> 
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture 
    </div> 
    <div class="col-xs-4"> 
     <a href="" class="">action</a> 
</div> 
<div class="col-xs-4">   
      <span id="title">4rows text</span><br> 
     <span id="title">4rows text</span><br> 
<span id="title">4rows text</span><br> 
    </div></div> 
    <!-- nav bottom --> 
    <div class="row"> 
    <ul class="nav nav-pills navbar-nav navbar-left"> 
    <li>menuleft1</li><li>menuleft2</li><li>menuleft3</li> 
    </ul><!-- /nav --> 

     <ul class="nav nav-pills navbar-nav navbar-right"> 
     <li>menuright1</li><li>menuright2</li><li>menuright3</li> 
     </ul><!-- /right_nav --> 

    </div> 

答えて

1

http://www.bootply.com/8IqCa4lI6T

は、ここで私はあなたがしようとしていると信じて何を達成するために、適切なHTMLとBootplyです。ブートストラップCSSを変更する必要はありません。 navbarにIDを与え、そのIDにCSS属性を与えることで、ブートストラップCSSを置き換えることになります。

また、ブートストラップCSSファイルの後に読み込まれた別のCSSファイルで、ブートストラップクラスをオーバーライドすることもできます。そうすれば、ブートストラップCSS自体は変更されませんが、必要に応じてスタイリングを変更するコントロールがあります。

+0

ありがとうございました!よく働く!私はここでそれを片づけました:http://www.bootply.com/KZXTGaVsgE – DDJ

関連する問題