これはなぜブートストラップの.rowと.container-fluidで起こりますか？

Question

ありがとうございました：私は、.rowクラスを持つ2つのボックスを作成しようとしています。それらは両方とも.container-fluid wrappingです。私はこれを行うときはいつも右に奇妙なスペースがありますが、これはブートストラップが追加するマージンであるか分かりませんが、私が理解しているところからはわかりませんコンテナ流体はフルスクリーンになっていますか？

2つのボックスは、コンテナの流体ピンク/マゼンタであり、黄色と白色です。

CODE：

<div class="container-fluid"> 
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div> 

<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div> 
</div> 

なぜこれが起こっているに任意の洞察力は素晴らしいものと高く評価されます！

Answer 1

@Tomの示唆しているように、行要素の幅は、パッケージの一部として（CSSを介して）「決定」されます。そのため、明示的に幅を100％に設定しても、ブートストラップが何をしているのかに対処しています。バラの列は青よりも広い30px必要です。私はそれがブートストラップのjavascriptがなくても真実だと信じていますが、私はそれを完全に追加しました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div> 
 
    <div class="row" style="background-color: mistyrose; height:50px;"></div> 
 
    <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

は、コンテナ流体のためのマージンを設定してみてください：

<div class="container-fluid" style="margin: 0 auto;"> 
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div> 

<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div> 
</div> 

Answer 3

は、すでにあなたはこの問題を抱えている理由になりそうだこれは、左右のマージンを設定しそのクラス.row.からあなたwidth: 100%プロパティを削除してください。ブラウザのインス​​ペクタで見ると、余白がどのように視覚的に描かれているかがわかります。