Question

我正在玩使用bootstrap的配色方案，并且无法调整粘性页脚和导航栏的颜色。我正在我的CSS文件中进行背景颜色调整，但似乎没有调整粘性页脚。我的CSS无法覆盖粘性页脚颜色的任何想法？

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
    <title>Bootstrap basic website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> 
    <!--Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <!-- Your CSS -->
    <link href="css/index.css" rel="sytlesheet"> 
  </head> 
   <div class="wrapper">
      <div class="container">
        <header class="hero-unit">
          <h1>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</h1>
          <p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
        </header>

      </div>
      <div class="push"><!--//--></div>
    </div>
    <div id="footer">
      <div class="container">
        <p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Sticky Footer</a>.</p>
      </div>
    </div>

<!-- jQuery and javascript at end of page (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS:

 html, body {
            height: 100%;
        }

@media (max-width: 979px) {
  .navbar-fixed-top.navbar-absolute {
    position: absolute;
    margin: 0;
  }
}

.navbar-absolute + div {
    margin-top: 68px;
}

        footer {
            color: #FF0000;
            background: #FF0000;
            padding: 17px 0 18px 0;
            border-top: 1px solid #FF0000;
        }
        footer a {
            color: #FF0000;
        }
        footer a:hover {
            color: #efefef;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -63px;
        }
        .push {
            height: 40px;
        }
        /* not required for sticky footer; just pushes hero down a bit */
        .wrapper > .container {
            padding-top: 60px;
        }

Answer 1

您可能想要改变一些事情。在（自定义）CSS中，您希望更改两种背景颜色，如：

.navbar-default {
    background-color: #000000;
}

表示标题和

#footer {
    background-color: #FF0000;
}

页脚。现在，您会注意到这些颜色被.container背景颜色覆盖。因此，如果您没有更改默认ID和类，您可能希望用以下内容覆盖它：

div.navbar-default > div.container {background-color:#000000;}

表示标题和

div#footer > div.container {background-color:#FF0000;}

页脚。像往常一样使用CSS，确保以正确的顺序加载这些样式（即，在加载了默认＆＃39; bootstrap CSS文件之后）。祝你好运。

更改粘性页脚和导航栏颜色

1 个答案: