【问题标题】: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

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

      【讨论】:

        猜你喜欢
        • 2023-04-06
        • 2019-11-12
        • 2020-08-12
        • 1970-01-01
        • 1970-01-01
        • 2015-05-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多