Question

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

<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

Answer 1

要更改div的整个宽度，您需要将html和body上的宽度设置为100％。您还需要将边距设置为0.最后，将navbar类设置为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.

Answer 2

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

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

Answer 3

导航全宽背景（让我们称之为）我只在CSS中留下了这个。

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

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

}

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

See What You Get Here

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

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

3 个答案: