为什么背景色对我不起作用？

Question

I am working through Free Code Camp and trying to setup a portfolio type page. 我正在通过Free Code Camp进行工作，并尝试设置投资组合类型页面。 Under the about me section there is a div called content section. 在“关于我”部分下有一个称为“内容”部分的div。 No matter what I do I can not add a background color to it. 不管我做什么，我都无法为其添加背景色。 I have tried inline, adding an id, and adding a class but it just wont change. 我试过内联，添加一个id，并添加一个类，但它不会改变。 Any suggestions? 有什么建议么？

  <!--Navbar-->
      <nav class="navbar navbar-default">
        <div class="container-fluid"> 
          <div class="navbar-header">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Me</a></li>
              <li><a href="#">Porfolio</a></li>
              <li><a href="#">Contact Me</a></li>
            </ul>
          </div>
        </div>
      </nav>
<!--hero-->
  <div class="jumbotron" id="hero">
    <h1>Personal Portfolio</h1>
  </div>
<!--About Me-->
  <div class="content-section" style="background-color:red;">
    <div class="col-md-6">
      <h1>Tyler Jensen</h1>
      <p>I am starting to work on my front end skills.</p>
    </div>
    <div class="col-md-6">
      <img class=
"img-thumbnail" src="1969391_10202992168661853_8988955640237620329_n.jpg">
    </div>
  </div>
<!--Portfolio-->
  <div class="content-section">
    <div class="col-md-3"><img src="/Hausbarn.jpg" width="200px" alt="german hausbarn"></div>
    <div class="col-md-3"><img src="/CuppUC.jpg" width="200px" height="133px" alt="cupp insurance"></div>
    <div class="col-md-3"><img src="/BackflowPipe.jpg" width="200px" height="133px" alt="cupp insurance"></div>
    <div class="col-md-3"><img src="/carrier1.jpg" width="200px" height="133px" alt="cupp insurance"></div>
  </div>
<!--Footer-->
    <footer class="footer">
      <div class="content-section">
        <div class="col-md-4 text-center">
          <ul style="display: inline-block">
           <li><a href="#">Home</a></li>
           <li><a href="#">About Me</a></li>
           <li><a href="#">Porfolio</a></li>
           <li><a href="#">Contact Me</a></li>
         </div>
         <div class="col-md-4 text-center">1234 Street<br>Chicago, Il </div>
         <div class="col-md-4 text-center"><img src="" width="200px"></div>
        </div>
    </footer>  
</body>

Answer 1

Add a class of clearfix to the one that has the background color: http://getbootstrap.com/css/#helper-classes-clearfix 将一类clearfix添加到具有背景色的clearfix类： http : clearfix

It has to do with the Block Formatting Context: How does the CSS Block Formatting Context work? 它与“块格式化上下文”有关： CSS块格式化上下文如何工作？

When you have a container ( <div ) with elements inside that are floated (in your case, the columns), the parent collapses to 0 height (so the background is there, but can't see it). 当您有一个容器（ <div ），其中的元素是浮动的（在您的情况下为列）时，父级折叠到0高度（因此背景在那儿，但看不到）。 There are different ways to fix the issue, one of them is the clearfix solution. 有多种解决问题的方法，其中一种是clearfix解决方案。 I sometimes just set the parent to overflow:hidden to fix the issue. 有时我只是将父级设置为overflow:hidden即可解决此问题。

More on clearfix: What is a clearfix? 关于clearfix的更多信息：什么是clearfix？

Answer 2

I have a solution for you! 我为您提供解决方案！ Below you can just copy paste the code into your project. 您可以在下面将代码复制粘贴到您的项目中。 I advise you to have HTML & CSS file and make edits that way, just doing it from HTML might encounter some problems that you'll get lost in. Best regards, 我建议您使用HTML和CSS文件并以这种方式进行编辑，仅通过HTML进行操作可能会遇到一些您会迷失的问题。

 body { background-color: blue; } .content-section2 { background-color: red; }

 <!DOCTYPE <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="index.css" /> </head> <body> </body> </html> <!--Navbar--> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Porfolio</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </div> </nav> <!--hero--> <div class="jumbotron" id="hero"> <h1>Personal Portfolio</h1> </div> <!--About Me--> <div class="content-section" style="background-color:red;"> <div class="col-md-6"> <h1>Tyler Jensen</h1> <p>I am starting to work on my front end skills.</p> </div> <div class="col-md-6"> <img class= "img-thumbnail" src="1969391_10202992168661853_8988955640237620329_n.jpg"> </div> </div> <!--Portfolio--> <div class="content-section2"> <div class="col-md-3"><img src="/Hausbarn.jpg" width="200px" alt="german hausbarn"></div> <div class="col-md-3"><img src="/CuppUC.jpg" width="200px" height="133px" alt="cupp insurance"></div> <div class="col-md-3"><img src="/BackflowPipe.jpg" width="200px" height="133px" alt="cupp insurance"></div> <div class="col-md-3"><img src="/carrier1.jpg" width="200px" height="133px" alt="cupp insurance"></div> </div> <!--Footer--> <footer class="footer"> <div class="content-section"> <div class="col-md-4 text-center"> <ul style="display: inline-block"> <li><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Porfolio</a></li> <li><a href="#">Contact Me</a></li> </div> <div class="col-md-4 text-center">1234 Street<br>Chicago, Il </div> <div class="col-md-4 text-center"><img src="" width="200px"></div> </div> </footer> </body>

为什么背景色对我不起作用？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-05-11 20:16:06

解决方案2
0 2018-10-01 11:11:40

为什么背景色对我不起作用？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-05-11 20:16:06

解决方案2 0 2018-10-01 11:11:40

解决方案1
1 已采纳 2016-05-11 20:16:06

解决方案2
0 2018-10-01 11:11:40