Question

我想改变课程“菜单”的颜色但是我不知道为什么当我在下面的css上调用课程“菜单”时，它不会改变。你能给我一个更好的CSS重置或任何其他解决方案吗？

.menu{
 background-color: black;}


<div class="menu">
<div class="container">
  <nav class="navbar navbar-expand offset-3 fixed-top">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
       <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id ="collapse-menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#gioithieu">ABOUT</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">CONTACT</a> 
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

您的背景未显示为.menu折叠且高度和宽度为零。发生这种情况是因为孩子有一个position: fixed并退出了父线程。您还可以使用Bootstrap 4类来定义background-color。

<div class="menu fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand offset-3">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
           <span class="navbar-toggler-icon"></span>
         </button>
        <div class="collapse navbar-collapse" id="collapse-menu">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#gioithieu">ABOUT</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT</a> 
            </li>
          </ul>
        </div>
      </nav>
    </div>
</div>

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

Answer 2

尝试使用！像这样重要

<style>
    .menu
    {
     background-color: black!important;
    }
</style>

Answer 3

试试这个：

<style>
.menu{
 background-color: black !important;
}
</style>

无法更改类“菜单”的背景颜色

3 个答案: