问题：

当navbar在折叠的汉堡包中时，不显示Bootstrap navbar下拉菜单按钮

林亦

2023-03-14

我有一个boostrap navbar和一个css媒体查询来折叠它，并使它通过一个汉堡包按钮打开，当屏幕低于一定的尺寸（对于移动设备）。但是，我的navbar中也有一个下拉菜单，当navbar全屏展开时，下拉菜单很好地工作，但是当我从hamburger版本的navbar中打开它时，下拉菜单中的按钮不会显示。

下面是NAVBAR的html代码：

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">What is tSotRH?</a></li>
        <li><a href="#">About Me</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
          <ul class="dropdown-menu pinkBackground">
            <li><a style="color:#062F4F" href="#">Stream 1</a></li>
            <li><a style="color:#062F4F" href="#">Stream 2</a></li>
            <li><a style="color:#062F4F" href="#">Stream 3</a></li>
          </ul>
        </li>
      </ul>


    </div>
</nav>

这是折叠navbar的CSS媒体查询：

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;

    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

这是我的navbar的CSS代码：

.navbar-default {
    z-index: 1;
    background-color: #062F4F;
    border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
    color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #813772;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #813772;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFFFFF;
    background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}

任何帮助都非常感谢，为什么navbar下拉按钮不显示时，菜单打开从折叠的汉堡包按钮（同时，我意识到这可能是一个相当愚蠢和简单的错误，但我找不到它）

共有1个答案

锺离德庸

2023-03-14

这是工作良好的，但锚的颜色是相同的背景，你必须使用这类，并改变颜色与媒体屏幕或让默认的引导颜色在移动（灰色）

null

html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-default {
    z-index: 1;
    background-color: #062F4F;
    border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
    color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #813772;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #813772;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFFFFF;
    background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-nav  .pinkBackground>li>a {
    color:#062F4F ;
}

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;

    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

 </style>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">What is tSotRH?</a></li>
        <li><a href="#">About Me</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
          <ul class="dropdown-menu pinkBackground">
            <li><a href="#">Stream 1</a></li>
            <li><a href="#">Stream 2</a></li>
            <li><a  href="#">Stream 3</a></li>
          </ul>
        </li>
      </ul>


    </div>
</nav>

类似资料：

如何使汉堡包菜单显示下拉列表

我正在学习Bootstrap 4，我已经成功地把我的navbar中的内容变成了汉堡菜单，就像我想要的那样，在更小的屏幕尺寸下。我现在遇到的问题是,成为汉堡菜单的其中一个东西是一个Browse按钮,它以更大的屏幕尺寸显示下拉列表：在较小的屏幕尺寸下，它确实变成了一个汉堡包菜单，但当我点击汉堡包菜单时，浏览按钮就会出现在它的右边，而这并不是我想要的：我正在尝试消除在较小屏幕尺寸的点击，并使汉堡包菜
引导导航折叠-菜单项在切换下拉菜单中不对齐

我实现了这个Bootstrap 3 Navbar折叠来改变Navbar折叠，但我有一个问题，在nav上的切换。我为最小宽度：992px放入这个，使我的菜单悬停打开，而不是切换桌面大小。我遇到的问题是，当我在sm大小中切换一个菜单项时。下拉菜单不会直接切换到下面。它会在右手边爆炸。我似乎找不到什么是css选择器，它直接放在下面，而其他项目“移开的方式” 这就是正在发生的事情我要这个是SM号的
引导程序navbar不显示折叠div和navbar-nav列表

试着在bootstrap中做一个navbar。标题占用了所有空间，折叠div没有显示。而我从教程中输入了完全生成输出的精确代码。我做错了什么？这里是Bootstrap初学者。我创建了一个带有navbar-hear和navbar-collable div的nav标记，其中有两个navbar选项列表 null null navbar-nav元素是不可见的，如果我移除caplable class，它们
仅在折叠时显示

我尝试了和（切换到和从透明的），但没有成功。我也看不到任何内置的方法来做我想要的事情。我只想在CollapsingToolbarLayout完全折叠时显示标题，否则，我需要隐藏它。
如何在单击按钮时显示引导折叠div？

我有下面的div，希望在单击按钮时显示它。我在按钮点击事件中使用这个jquery代码。 $（'.container collapse'）。removeClass（'.container collapse'）。addClass（“容器”）；为什么现在不显示div，因为我已经改变了类？它抛出一个错误未捕获的类型错误：$（...）。
单击切换按钮时显示向下菜单

我的菜单显示向下，但然后水平。我希望每一个导航项目都显示下来，在彼此的上面。现场测试站点URL：ministerios-elim.herokuapp.com CodePen：（无法使菜单在单击CodePen时出现）。 https://codepen.io/ogonzales/pen/abnqxlg 更新2：更新3：

当navbar在折叠的汉堡包中时，不显示Bootstrap navbar下拉菜单按钮

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档