html - 无法为容器流体设置背景颜色

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

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

Try this or add some content

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

With some content in container-fluid

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