顶部导航栏的背景颜色不是文本答案

【问题标题】：Background color of top navbar not the text顶部导航栏的背景颜色不是文本
【发布时间】：2018-04-01 03:59:16
【问题描述】：

我想更改顶部导航栏的背景颜色，如何填充顶部导航栏全宽颜色而不仅仅是文本背景颜色？这是代码

<nav class="navbar navbar-default navbar-fixed-top navbar-collapse">
            <div class="topnavbar">
                Brand Here
            </div>

    <nav class="navbar navbar-inverse navbar-collapse">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
              </div>
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Page 1-1</a></li>
                          <li><a href="#">Page 1-2</a></li>
                          <li><a href="#">Page 1-3</a></li>
                        </ul>
                      </li>
                <li><a href="#">Page 2</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
              </ul>
            </div>
          </nav>

CSS 

.topnavbar {
    margin-top:20px;
    margin-left:30px;
    margin-bottom:20px;
    background-color: rgb(60, 165, 29);

}

I am talking about Green part

【问题讨论】：

您认为background-color: rgb(60, 165, 29); 会做什么？你没有想过要改变它吗？

标签： html css

【解决方案1】：

要更改 div 的全宽，您需要将 html 和 body 的宽度设置为 100%。您还需要将边距设置为 0。最后，将导航栏类设置为 width:100%。

基本上，将宽度设置为 100% 意味着容器占据了父容器的整个宽度。因此，您必须将.topnavbar 的所有父级设置为 100% 宽度。

.topnavbar {
    margin-top:20px;
    margin-bottom:20px;
    background-color: rgb(60, 165, 29);
    width:100%;
}

html,body{
 width:100%; 
 margin-left:0;
 margin-right:0;
}

Here is a fiddle.

【讨论】：

【解决方案2】：

您的.topnavbar 元素具有不受background-color 影响的margin。您可以改用padding，但由于.navbar-collapse 元素，您的侧面仍然会有白色的15px padding。您可以通过在 .topnavbar 上设置负边距来缓解它，如下所示：

.topnavbar {
    margin: 0 -15px;
    padding: 20px 0 20px 30px;
    background-color: rgb(60, 165, 29);
}

【讨论】：

【解决方案3】：

获得导航全宽背景（让我们这么称呼它）我只在你的 CSS 中留下了这个。

body,html{
margin: 0;
width: 100%;
}

.topnavbar {
background-color: rgb(60, 165, 29);
padding: 10px;

}

只需删除边距就可以了。对于不同的背景颜色，只需使用不同的 rgba 或十六进制代码。我添加了一些填充以看起来更好。

See What You Get Here

希望这会有所帮助。亲切的问候

【讨论】：