Bootstrap 导航栏:在较小的设备上不显示任何内容 [英] Bootstrap navbar: nothing is displayed on smaller devices

问题描述

这个中间带有徽标图像的导航栏在较大的屏幕上效果很好，但在较小的屏幕上，包括徽标图像在内的所有内容都消失了(并且无法显示汉堡包) 有谁知道解决此问题的方法吗?

这是链接:http://codepen.io/davidcochran/pen/Fkwys

#navbar-primary .navbar-nav {宽度:100%；文本对齐:居中；}#navbar-primary .navbar-nav >李{显示:内联块；浮动:无；}#navbar-primary .navbar-nav >立>一种 {左边距:30px；padding-right: 30px;}

<nav id="navbar-primary" class="navbar" role="navigation"><div class="container-fluid"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

<div class="collapse navbar-collapse" id="navbar-primary-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Link</a></li><li><a href="#">链接</a></li><li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li></div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav></header><!-- header role="banner" -->

解决方案

它在那里，但你没有看到，因为没有背景颜色..

使用 navbar-default navbar-light 或 navbar-dark 类:

<nav id="navbar-primary" class="navbar navbar-light bg-light" role="navigation">

或，添加背景色:

#navbar-primary .navbar-nav {背景:#ededed;}

或，使切换器变暗:

.navbar-toggle .icon-bar {背景颜色:RGB(136、136、136)；}

https://www.codeply.com/go/QGDVIsAeda

Bootstrap 4.0.0 的更新

navbar-default 不见了.现在将 navbar-light bg-light 用于浅色导航栏，或 navbar-dark bg-dark 用于深色导航栏.

---

另见:Bootstrap 4 更改汉堡切换器颜色

This nav bar with logo image in the middle works really well on larger screens but on smaller screens, everything disappears including logo image (and the hamburger fails to be displayed) Does anyone know a fix for this issue?

Here's the link: http://codepen.io/davidcochran/pen/Fkwys

#navbar-primary .navbar-nav {
  width: 100%;
  text-align: center;
}
#navbar-primary .navbar-nav > li {
  display: inline-block;
  float: none;
}
#navbar-primary .navbar-nav > li > a {
  padding-left: 30px;
  padding-right: 30px;
}

<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->

解决方案

It's there but you're not seeing because there is no background-color..

Use the navbar-default navbar-light or navbar-dark class:

<nav id="navbar-primary" class="navbar navbar-light bg-light" role="navigation">

or, add a background color:

#navbar-primary .navbar-nav { 
   background: #ededed;
}

or, darken the toggler:

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

https://www.codeply.com/go/QGDVIsAeda

Update for Bootstrap 4.0.0

navbar-default is gone. Now use navbar-light bg-light of for a light colored navbar, or navbar-dark bg-dark for a dark colored navbar.

---

Also see: Bootstrap 4 Change Hamburger Toggler Color

这篇关于Bootstrap 导航栏:在较小的设备上不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！