Question

我正在使用boostrap 4，我想改变navbar元素的颜色。我已经覆盖了navbar-brand类，但事情没有按预期工作。

我希望从第一个开始实现某种效果。你可以看到整个宽度和高度的白色，但在第二个它只是出现在名称周围。你能帮我吗。我也希望这能用于我的元素

HTML

<head>
  <title>Samrat Luitel website design</title>
</head>
<body>
  <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-expand-md topnav" role="navigation" >
    <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" target="_blank">Samrat Luitel</a>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" style="color:black" class="nav-link">Home</a></li>
        <li><a href="#home" style="color:black" class="nav-link">Home</a></li>
        <li><a href="#home" style="color:black" class="nav-link">Home</a></li>       
      </ul>   
    </div>
      </div>
    </div>
  </div>

  </nav> 
</body>

CSS

body{
  font-family:"Lato";
  font-weight:700;
}
.topnav {
    font-size: 16px;
    border-bottom: 1px outset rgba(192, 192, 192, 0.5);
    background: rgba(192, 192, 192, 0.9);
    box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}
.navbar-brand{
  color:black;
  background:white;
}

Answer 1

将以下内容添加到CSS

.topnav{
  padding:0;
}
.navbar-brand {
 color: black;
 background: white;
 padding: .3125rem;
}

如果您想保持标题高度，请将min-height设置为topnav

Boostrap 4无法改变导航栏元素的颜色？

1 个答案: