当边栏显示时，导航栏中有两种背景颜色

Question

我制作了一个简单的页面，其中有一个navbar的bootstrap和一个侧边栏：JSBin。目前，导航栏的背景颜色为black。

现在，我要完成如下：

1）当页面不够宽，无法显示侧边栏，我想导航栏的背景颜色是完全black。

2）然而，页面的宽度足以显示侧边栏的时候，我想补充工具栏上方导航栏的区域有不同的背景颜色（例如，white）。像以下屏幕截图一样，侧边栏上方的区域为blue，而导航栏的其余部分为white。

我试图在导航栏中添加一个元素<div class="col-sm-3 col-md-3">，但它不起作用。看起来这只能包含在container或container-fluid中。

有谁知道如何做到这一点？有什么解决方法吗？

Answer 1

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