仅导航容器具有其背景颜色,但我希望整个流体容器都为深色。
.dark-nav {
background-color: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid dark-nav">
<nav class="navbar fixed-top navbar-dark dark-nav navbar-expand-lg container">
*Navbar content here*
</nav>
</div>
答案 0 :(得分:0)
这里的问题是您的容器中没有任何液体,而最好的方法是
尝试一下或添加一些内容
.dark-nav {
background-color: #222;
}
<div class="container-fluid dark-nav">
<nav class="navbar fixed-top navbar-dark dark-nav navbar-expand-lg container">
content here
</nav>
</div>
在容器流体中有一些内容
.dark-nav {
background-color: #222;
padding:20px
}
<div class="container-fluid dark-nav">
<nav class="navbar fixed-top navbar-dark dark-nav navbar-expand-lg container">
content gjoes heere
</nav>
<div>
some extra content
</div>
<div>
some extra content
</div>
<div>
some extra content
</div>
<div>
some extra content
</div>
</div>
答案 1 :(得分:0)
类别为div
的{{1}}仅占用当前内容的高度,在您的示例中,容器内部只有container-fluid
。如果要将背景设置为浏览器屏幕的全高,则可以使用下面的类。
navbar
还请注意,您需要删除导航栏上的类.dark-nav {
background-color: #222;
height: 100vh;
width: 100%;
}
,因为这也会向导航栏添加相同的背景!
请参考以下示例!
dark-nav
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 0px;
}
.dark-nav {
background-color: #222;
height: 100vh;
width: 100%;
}