更改粘滞页脚和导航栏颜色答案

【问题标题】：Changing sticky footer and navbar colors更改粘滞页脚和导航栏颜色
【发布时间】：2014-06-11 08:44:02
【问题描述】：

我正在使用引导程序玩弄配色方案，并且在调整粘性页脚和导航栏的颜色时遇到了麻烦。我正在我的 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;
        }

【问题讨论】：

标签： twitter-bootstrap sticky-footer

【解决方案1】：

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

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

对于标题和

#footer {
    background-color: #FF0000;
}

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

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

对于标题和

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

用于页脚。与 CSS 一样，确保这些样式以正确的顺序加载（即，在加载“默认”引导 CSS 文件之后）。祝你好运。

【讨论】：