2017-04-03 15 views
0

以下の出力では、navbarのメニューが正しく表示されません。問題はどこだ?Bootstrap navbarの解決方法

私を助けてください。

私のコードbootstrap.cssを変更し、この行のコメント行に、padding-bottomというコメントを付けました。

<nav class="navbar navbar-inverse" style="height:120px;"> 
    <div class="container" style="padding-top:30px;"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a><img class="pull-left" src="images/mt-626_header_logo01.png"></a> 
     <a class="navbar-brand" href="#"><strong style="color:white">SOFT</strong><strong style="color:#3EC7C2">APP</strong></a>&nbsp; 
    </div> 
    <div class="collapse navbar-collapse" id="navbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">SERVICES</a></li> 
     <li><a href="#">BLOG</a></li> 
     <li><a href="#">CONTACTS</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

<!-- First Container --> 
<div class="container-fluid fcontaner"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-6"> 
       <img src="images/mt-0626-img.png" style="height:100%;width:100%"/> 
      </div> 
      <div class="col-md-6"> 
       <h1 style="padding-top:150px"><strong style="color:white;">SOFT</strong><strong style="color:">APP</strong></h1> 
       <h1>INNOVATIVE SOLUTIONS</h1> 
       <h3 style="color:white;padding-bottom:50px;">Innovative solutions delivering a product, which <br>includes tomorrow’s technology – already today!</h3> 
       <a href="#"><img src="images/mt-0626-img2.png"></a> 
      </div> 
     </div> 
    </div> 
</div> 

答えて

1

イスマイルにより示唆されるようにしたい場合は、<nav class="navbar navbar-inverse" style="height:120px;">からの高さを削除することができます。

しかし、あなたは本当にあなたのnavが、代わりにheightのあなたは<nav class="navbar navbar-inverse" style="min-height:120px;">としてmin-heightを与えることができ、それが動作しますが、デフォルトの高さを持つようにしたい場合。あなたのナビゲーションは、コンテンツの高さが増すにつれて拡大します。

デモ:http://www.bootply.com/0JiOM9OxYW

+0

tnx bro。私はそれを得た – Arman

+0

それがあなたを助けた場合、答えを正しいとマークしてください。 –

0

高さとパディングトップCSSを取り外します。

0

ここにインラインスタイルを追加しました。<nav class="navbar navbar-inverse" style="height:120px;">あなたの問題は解決します。

See Demo

+0

TNXしかし、私は、この高さを必要とするそれ以外のナビゲーションバーには、小さなに行きます。 – Arman

+0

ちょうどコンテナ –

+0

にパディングボトムを追加するか、代わりにmin-heightを使用することができます –