容器液體的寬度短於身體

我身體的背景是黑色的，我試圖在它下面新建一個使用紅色的圖層。所以如果你向下滾動第一個塊將是黑色的，然後第二個塊將是紅色的。問題是，當我在HTML中設置一個新的容器流體時，即使我在CSS中使用「width：100％」，紅色塊也不適合屏幕的整個寬度。容器液體的寬度短於身體

問題似乎是身體，身體是黑色的，它比容器流體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>

來源

2017-02-04 ironSteel

剛剛從.newlayer刪除width:100%你會被罰款。

工作的代碼片段連接下面

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

您可以在本地文件複製該文件，然後鏈接它的頭標籤內。

HERE IS THE LINK TO THE FILE

或者只是使用<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>頭標記爲我所用。在這種情況下，刪除您的本地文件。

來源

2017-02-04 15:10:39 neophyte

你正在使用他們的網站的CSS，我有它的本地。你知道我仍然可以使用這個鏈接使用sass：href =「http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css」？ – ironSteel

容器液體的寬度短於身體

回答

相關問題