Question

在下面的输出中，我无法正确查看我的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>

Answer 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

Answer 2

删除高度和填充顶部css。

Answer 3

您在此处添加了内联样式<nav class="navbar navbar-inverse" style="height:120px;">，只需删除它，您的问题就会解决。

See Demo

如何解决Bootstrap navbar隐藏问题

3 个答案: