html - 如何解决 Bootstrap 导航栏隐藏

标签 html css twitter-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>

最佳答案

您可以从 <nav class="navbar navbar-inverse" style="height:120px;"> 中删除高度如果你想要按照 Ismail 的建议。

但是如果你真的想要你的 nav有一个默认高度,然后而不是 height你可以给min-height作为<nav class="navbar navbar-inverse" style="min-height:120px;">它会起作用的。您的导航会随着其中内容的高度增加而扩展。

演示:http://www.bootply.com/0JiOM9OxYW

关于html - 如何解决 Bootstrap 导航栏隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43184073/

相关文章:

javascript - 在 UI 小部件中集成文本和图像

html - 将响应式 Logo 放入 Bootstrap Navbar 的最简单方法是什么

javascript - 对重复的 HTML 使用相同的 JavaScript

html - 嵌套 ul 水平对齐

css - 定位在 ff、chrome 中有效,但在 ie7 中无效

javascript - 创建 Wordpress 网站的移动版本

html - 如何使用 bootstrap 进行 about me 布局

html - 如何为两列保持单个 div 和相同的高度

jquery - 重置响应功能

javascript - html5 Canvas toDataURL 返回空白图像