2017-04-03 124 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

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