时间戳

首页 > 解决方案 > 为什么我的导航区域的背景颜色不正确

css - 为什么我的导航区域的背景颜色不正确

问题描述

我正在使用旧版本的 twitter bootstrap 为一个班级做一个项目，在这个过程中，我发现我的背景颜色有些奇怪。

在两个元素<nav>和其中一个<div>元素上，我指定了相同的背景颜色#D3D3D3，但是当我在浏览器中查看页面时，这两个部分的背景具有不同的灰色。

任何想法为什么会这样以及如何解决它将不胜感激。

我的页面位于： http ://donraikes.github.io/hcj/csstest/

我的 index.html 如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Module-3 Solution</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body style="background-color: white; color: black; font-size: 16">
  <header style="background-color: #D3D3D3;">
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container-fluid">
      <div id="nav-header" class="nav-header">
      <h1 class="nav-brand">Food, LLC</h1>

          <button " type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        <div id="collapsable-nav" class="collapse navbar-collapse">
           <ul id="nav-list" class="nav navbar-nav navbar-right hide-md hide-sm visible-xs">
            <li><a href="#">Beef</a></li>
            <li><a href="#">Chicken</a></li>
            <li><a href="#">Sushi</a></li>
          </ul><!-- #nav-list -->
          </div>
    </div>
    </div>
    </nav>
  </header>
    <h2 class="text-center">Our Menu</h2>
    <div class="container">
    <div id="mainsection" class="col-xs-12" style="background-color: #D3D3D3">
    <h3 class="text-center">Chicken</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fermentum ligula. Aenean sollicitudin rhoncus fermentum. Maecenas laoreet, sem non dictum venenatis, mauris ipsum maximus mi, non pulvinar orci nisi a justo. Pellentesque vehicula convallis leo at feugiat. Praesent finibus lorem nibh. Mauris pellentesque sagittis eleifend. Donec rhoncus eros a ex hendrerit tincidunt. Donec quis tempus tellus. Pellentesque vitae ipsum sed sapien consectetur posuere.</p>
<p>Suspendisse dignissim tristique sem vitae viverra. Pellentesque pulvinar mi a lorem lobortis euismod. Maecenas massa nisl, venenatis ullamcorper metus eu, semper dapibus nunc. Praesent vulputate aliquet arcu. Fusce suscipit arcu ut ipsum varius, sed sagittis elit vestibulum. Morbi ac bibendum massa. Curabitur pellentesque auctor ipsum, sed varius turpis pretium sed. Sed augue purus, accumsan id diam sed, ullamcorper lobortis justo. Nulla facilisi. Praesent lacinia iaculis pellentesque. Nulla sed finibus nibh, at vulputate purus. Aliquam erat volutpat. In ac est a nisi volutpat mattis vitae sed est.</p>
<p>Duis ullamcorper nulla sit amet tortor condimentum, at molestie massa hendrerit. Nulla quis scelerisque lectus. Vivamus placerat, erat eget tincidunt bibendum, felis metus tincidunt mauris, ac consequat odio arcu ut diam. Etiam sit amet aliquet augue, eget vestibulum magna. Donec at facilisis elit. Morbi eu massa iaculis, aliquet massa sit amet, sollicitudin mi. Integer commodo metus eu massa tempor, vitae sodales enim fermentum. Nam lobortis dui vel odio imperdiet bibendum. Vestibulum aliquam purus orci, vitae pharetra felis pulvinar sit amet. Morbi sodales arcu ligula, maximus rutrum risus ultricies vitae. Ut velit nibh, feugiat eleifend ultricies quis, volutpat in arcu. Fusce dapibus erat risus, nec volutpat nisl pellentesque non. Nam nisi sem, dictum at neque sit amet, fermentum dictum mi. Phasellus rutrum, enim at vehicula hendrerit, ex magna elementum orci, id malesuada nulla leo non dui. Proin vitae interdum dui.</p>
    </div>
    </div>


  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

标签： css

解决方案

你已经申请background-color: #D3D3D3;了header那是父母的nav.navbar-default。但是，在 navbar.less 的第 395 行nav.navbar-default有一个background-color规范显示在header.

为了background-color: #D3D3D3;可见，将其内联应用于nav.navbar-default.

<body style="background-color: white; color: black; font-size: 16">
  <header>
    <nav id="header-nav" class="navbar navbar-default" style="background-color: #D3D3D3;">
      ...

推荐阅读