Bootstrap 折叠菜单/下拉菜单颜色问题答案

【问题标题】：Bootstrap collapse menu/dropdown menu color questionBootstrap 折叠菜单/下拉菜单颜色问题
【发布时间】：2020-02-05 21:09:51
【问题描述】：

下午好！我目前正在使用导航栏，但是通过单击汉堡包图标弹出的菜单（将所有链接/导航项显示为较小的屏幕宽度）在演示级别上有点太花哨/不是很好.如何自定义该下拉菜单以使其看起来更好？ HTML 代码如下：

<nav id="navigation" class="navbar navbar-expand-sm">
  <a href="#" class="navbar-brand">Brand</a>
  <button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
    <span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
  </button>
  <div id="collap-menu" class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li><a class="nav-link" href="#">Etsy</a></li>
      <li><a class="nav-link" href="#">Facebook</a></li>
      <li><a class="nav-link" href="#">Instagram</a></li>
    </ul>
  </div>
</nav>

我要定位什么元素，或者更确切地说，如何自定义更好的下拉菜单？我注意到汉堡包图标在单击时也会将导航栏元素向上推

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

很难确切地知道如何为您提供有关样式的建议，因为我们无法仅通过 HTML 准确了解您当前正在查看的样式。利用核心 Bootstrap CSS，我可以近似您的观点并提供相应的建议。

假设您要更改每个菜单项的背景和文本颜色：

#collap-menu li{
  background: #666;
  padding-left: 20px;
}

#collap-menu li a{
  color: #fff;
}

这会将您的菜单项设置为带有白色文本的灰色背景，并为文本增加一点间距。您可以将此处的颜色替换为您网站的品牌颜色。除了更改文本和颜色之外的任何更改都需要在您的请求中特别列出。

【讨论】：