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

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