2017-04-03 159 views
0

在下面的輸出中,我無法正確看到我的navbar菜單。哪裏有問題?如何解決Bootstrap導航欄隱藏

請任何人都幫助我。

我剛剛更改了我的代碼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你可以給min-height<nav class="navbar navbar-inverse" style="min-height:120px;">,它會工作。隨着內容的高度增加,您的導航將會擴展。

演示: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

或者您可以使用最小高度代替 –