Question

我已经非常努力地编辑每个元素的样式但是NOTHING会改变我的导航栏的背景。我已经尝试过编辑导航栏中可能存在的每一个元素但实际上没有什么会改变。我已尝试使用规则＆＃34; #navbar .navbar-nav＆＃34;进行编辑。但每当我点击背景颜色，它就会回到透明......我做错了什么？

HTML：

<header role="banner">
<nav id="navbar" class="navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
    <li></li>
    <li><a href="#">Link</a><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
</body>

我的风格：

#navbar .navbar-nav { 
//  background: #FFFFFF;
width: 100%;
text-align: center;

> .nav.navbar-nav li {
display: inline-block;
float: none;
> .nav.navbar-nav a {
  padding-left: 30px;
  padding-right: 30px;

}
;   
background-color: #000000;
}
}

}
#navbar-primary-collapse .nav.navbar-nav li {
color: #FFFF;
padding-left: 30px;
padding-right: 30px;
background-color: #FFFFFF;
}
.container-fluid .navbar-header .navbar-toggle {
background-color: #FFFFFF;

}
li a #logo-navbar-middle {

}
.nav.navbar-nav li a {
padding-left: 30px;
padding-right: 30px;
text-align: center;
color: #000000;
text-transform: uppercase;
float: none;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
text-align: center;
color: #000000;
text-transform: uppercase;
float: none;
display: inline-block;}
.nav.navbar-nav li  {
float: none;
display: inline-block;
}

Answer 1

<强> CSS

.navbar-default {
    background-color: #fff;
}

并确保你的css文件在bootstrap css之后加载

Answer 2

看起来您还没有在CSS中正确声明导航。请尝试以下方法：

    private void setMargins ( int left, int top, int right, int bottom) {
     if (getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) getLayoutParams();
        p.setMargins(left, top, right, bottom);
        requestLayout();
     }
    }

 setMargins(0, 0, 0, 0);

您已将#navbar.navbar-default { background-color: #fff; }和#navbar分开，即使它们已附加到同一元素。

或者，添加另一个类并以这种方式设置样式：

.navbar-default

然后将其定位如下：

<nav id="navbar" class="navbar-default navbar-custom" role="navigation">

由于bootstrap.css只是将类调整为#navbar.navbar-custom { background-color: #fff; }并假设您的CSS在BootStrap之后加载，因此上面将覆盖BS，因为它更具体并且之后被加载。

如果您愿意，您甚至可以完全删除课程.navbar-default {}，并从头开始添加您自己的边框/背景，而不是覆盖。

无法改变navi bar bootstrap的背景

2 个答案: