bootstrap 5 导航栏的小屏幕上不显示汉堡菜单

Question

'我已将 bootstrap css 和 js 的样式表放入文件中。它在我保留默认颜色选项时显示，但在我自定义颜色时不显示。'

'''

        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">item</a>

        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">item</a>
        </li>



        <li class="nav-item">
          <a class="nav-link" href="#">item</a>
        </li>


        <li class="nav-item">
          <a class="nav-link" href="#">item</a>
        </li>
    </div>
  </div>
</nav>

'''

CSS: 我给正文添加了背景颜色，也让 nabber 的颜色相同。我已将文本设为粉红色，并在导航栏文本中添加了绿色悬停。#

body{
  background-color: #FFE57C;
}
.navbar{
padding-left: 350px;
}

.navbar a:hover{
  color: #FF7CD8;

}

.navbar a {
  color: #FF7CD8;
}
.nav navbar-nav .navbar-center {
  color: ##FF7CD8;
}

Answer 1

尝试在顶部导航标签中保留 navbar-light class，或者您可以使用 navbar-dark 如果你要。查看文档 here 了解更多详情。此 class 与在 bootstrap 中显示汉堡包图标相关联 5. 请参阅 bootstrap.css 中的代码：

navbar-light .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

但是您可以通过为 ul 标记添加 id 并在样式中添加 id 的属性来更改导航栏中的颜色，这我们可以调整 bootstrap 给出的默认属性。您可能可以通过此代码实现所需的功能，请查看以下代码：

html:

 <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">          
                <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="nav-list">
                     <li class="nav-item">
                    <a class="nav-link active" aria-current="page"href="#">Home</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">Item</a>
                    </li>
                </ul>
            </div>
        </div>
      </nav>

css:

body{
background-color: #FFE57C;
}
.navbar{
padding-left: 350px;
}

#nav-list a {
color: #FF7CD8;
}
#nav-list a:hover{
color: #FF7CD8;
}

例如，我只是在导航栏中放置了 2 个列表项。

bootstrap 5 导航栏的小屏幕上不显示汉堡菜单

Hamburger menu not showing up on smaller screens for bootstrap 5 navabar

html

css

bootstrap-5