Question

我身体的背景是黑色的，我正在尝试在它下面创建一个使用红色的新图层。因此，如果向下滚动，第一个块将为黑色，然后第二个块将为红色。问题是，当我在HTML中设置一个新的容器流体时，即使我使用＆＃34; width：100％＆＃34;在我的CSS中。

问题似乎是身体，身体是黑色的，它比容器流体div宽。我该如何解决这个问题？

<html>
<head>
<style>
 body { background-color: black; }
 .newLayer {background-color: red;
            width: 100%;
           }
</style>
</head>

<body>
  <div class ="container-fluid">
    <div class="row">
      <h1>This is the first block in all black.</h1>
     </div>
  </div>

 <div class="container-fluid">
   <div class="row newLayer">
     <h1>This is supposed to be the second layer.</h1>
   </div>
 </div>
</body>
</html>

Answer 1

只需从width:100%移除.newlayer即可。

下面附带的工作代码段

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
<style>
 body { background-color: black; }
 .newLayer {background-color: red;
            
           }
</style>
</head>

<body>
  <div class ="container-fluid">
    <div class="row">
      <h1>This is the first block in all black.</h1>
     </div>
  </div>

 <div class="container-fluid">
   <div class="row newLayer">
     <h1>This is supposed to be the second layer.</h1>
   </div>
 </div>
</body>
  </html>

＆＃13;

您可以将此文件复制到本地文件中，然后将其链接到head标记内。

HERE IS THE LINK TO THE FILE

或者只是在我使用的head标签中使用<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>。在这种情况下，请删除您的本地文件。

容器 - 流体的宽度比身体短

1 个答案: