Question

仅导航容器具有其背景颜色，但我希望整个流体容器都为深色。

.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>

Answer 1

这里的问题是您的容器中没有任何液体，而最好的方法是

尝试一下或添加一些内容

.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>

Answer 2

类别为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%;
}

无法设置容器流体的背景色

2 个答案: