2017-02-04 5 views
0

私の体の背景は黒で、赤を使用する下に新しい層を作ろうとしています。したがって、下にスクロールすると最初のブロックは黒色になり、2番目のブロックは赤色になります。問題は、CSSの中に「width:100%」を使用しても、HTMLの内部に新しいコンテナ流体を設定すると、赤いブロックが画面の全幅に合わないことです。コンテナ流体の幅がボディよりも短い

問題は身体と思われ、体は黒くコンテナ流体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> 

答えて

0

ちょうどあなたが罰金になります.newlayerからwidth:100%を削除します。

の作業のコードは、あなたがあなたのローカルファイルにこのファイルをコピーして、headタグ内でリンクすることができ

<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>を使用しています。その場合は、ローカルファイルを削除してください。

+0

自分のサイトのCSSを使用していますが、私はローカルです。私はこのリンクを使ってどうやって草を使うことができるか知っていますか?href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" ? – ironSteel

関連する問題