Question

我正在通过免费代码营工作并尝试设置投资组合类型页面。在about me部分下面有一个叫做内容部分的div。无论我做什么，我都无法添加背景颜色。我试过内联，添加一个id，并添加一个类，但它不会改变。有什么建议？

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

将clearfix类添加到具有背景颜色的类中： http://getbootstrap.com/css/#helper-classes-clearfix

它与块格式化上下文有关：How does the CSS Block Formatting Context work?

当你有一个容器（<div）里面有浮动的元素（在你的情况下是列）时，父级会折叠到0高度（所以背景就在那里，但不能看到它）。有不同的方法来解决问题，其中之一是clearfix解决方案。我有时只是将父级设置为overflow:hidden来解决问题。

有关clearfix的更多信息：What is a clearfix?

Answer 2

我为您提供解决方案！您可以在下面将代码复制粘贴到您的项目中。我建议您拥有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 个答案: