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

时间:2018-08-11 07:30:20

标签: html css twitter-bootstrap

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

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

2 个答案:

答案 0 :(得分:0)

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

  

尝试一下或添加一些内容

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

答案 1 :(得分:0)

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