1)当页面不够宽,以显示侧边栏,我想navbar
的 背景颜色为全黑。
您可以将媒体查询添加到您的身体标记只是包括它的身体后,在CSS
@media (max-width: 768px) {
body {
background-color: #000; // black color for background
}
}
2)然而,当页面的宽度足以显示侧边栏,我要的区域侧栏上方的导航栏具有不同的背景颜色(例如,白色)。像以下屏幕截图一样,侧边栏上方的区域为蓝色,而navbar
的其余部分为白色。
您可以将项目名称移动到导航栏外并应用其宽度和颜色。
不要忘记添加媒体查询,使其余保持白色导航栏中:)
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
.navbar-inverse {
background-color: #F8F8F8; // background color of navbar
border-color: #E7E7E7; // border color of navbar
}
}
部分,你需要
<div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;">
<a class="navbar-brand" href="#">Project name</a>
</div>
全部导航栏的
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
这里是JSBin
collap se nav侧栏打开并关闭汉堡包图标..我没有在您的jsbin示例中看到汉堡包图标。你打算怎么打开/关闭侧边栏? –
请参阅JSBin:打开/关闭边栏完全取决于页面的宽度。它不像我显示的屏幕截图。 – SoftTimur
当宽度很小时,我可以看到侧边栏隐藏并出现一个汉堡包图标。 –