Question

我正在使用左侧导航栏进行Bootstrap，除了一件让我发疯的小东西外，它工作得很好。

汉堡包菜单位于较窄屏幕的页面中，但不可见。我知道它就在那里，因为我可以点击它并且它可以工作，当我在Chrome中检查元素时，我可以看到它。

我添加了一个最小代码段。单击汉堡包菜单所在的位置，您将看到菜单展开。你能让汉堡菜单显示出来吗？

.navbar-left {
  overflow: auto;
  font-weight: 200;
  color: #fff;
  background-color: #3d486f;
  position: fixed;
  top: 0px;
  width: 250px;
  height: 100%;
}
.navbar-left a { color: #fff; }
.navbar-left-header { margin: 15px 0; }
.navbar-left ul, .navbar-left li { list-style: none; }
.navbar-clear { clear: left; }
@media (max-width: 767px) {
  .navbar-left {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .navbar-left .navbar-toggle { display: block; }
}
@media (min-width: 768px) {
  #menu-content { display: block; }
  .navbar-left .navbar-toggle { display: none; }
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar-left">

<div class="navbar-left-header">
Title
<button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle">
  <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="navbar-clear"></div>

<ul id="menu-content" class="collapse">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>
</div>

</div>

Answer 1

只需将背景颜色添加到.icon-bar

即可

.navbar-toggle .icon-bar {
    background-color: #fff;
}

Answer 2

在background-color上添加.icon-bar即可。



    .navbar-toggle .icon-bar{background-color:white;}
    .navbar-left {
      overflow: auto;
      font-weight: 200;
      color: #fff;
      background-color: #3d486f;
      position: fixed;
      top: 0px;
      width: 250px;
      height: 100%;
    }
    .navbar-left a { color: #fff; }
    .navbar-left-header { margin: 15px 0; }
    .navbar-left ul, .navbar-left li { list-style: none; }
    .navbar-clear { clear: left; }
    @media (max-width: 767px) {
      .navbar-left {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
      }
      .navbar-left .navbar-toggle { display: block; }
    }
    @media (min-width: 768px) {
      #menu-content { display: block; }
      .navbar-left .navbar-toggle { display: none; }
    }
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="navbar-left">

    <div class="navbar-left-header">
    Title
    <button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle">
      <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="navbar-clear"></div>

    <ul id="menu-content" class="collapse">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
    </div>

        </div>

Answer 3

您只需要在图标栏中添加背景颜色，因为它将从父级继承：

.navbar-toggle{
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
}

所以加上这个：

.navbar-toggle .icon-bar {
    background-color: #fff;
}

但是最简单的方法是将它添加到导航栏中，因此它会将navbar-default类添加到导航栏，因此bootstrap会将默认值应用于.icon-bar，然后您可以扩展它。< / p>

我建议正确检查bootstrap documentation for navbar，或查看此示例：

https://getbootstrap.com/examples/navbar/

Bootstrap汉堡包菜单在页面中但不可见

3 个答案: