私のコードに何が問題なのですか？

Question

<div class="row"> 
<div class="container"> 
    <div class="col-md-4 col-md-offset-4"> 
    <div class="login-wrapper"> 
     <div class="login-head"> 
      <h3 class="text-center"> Log in </h3> 
     </div> 

     <form> 
      <div class="form-group"> 
      <label for="email" class="sr-only"> Email </label> 
      <input type="text" placeholder="email here" class="form-control"> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="sr-only"> Password </label> 
      <input type="text" placeholder="Password here" class="form-control"> 
      </div> 

      <button type="button" class="btn btn-danger center-block"> Login </button> 

     </form> 

    </div> 
    </div> 
</div> 
</div> 

は、このコードの後、私は検査して、私のブラウザのスクロールバーを持って、私は変更

.row { margin-right: 0;} 

を作れば、それだけで罰金であることを見出しました。それは私のCSSとは関係ありません。私は自分のCSSを削除して試しました。ブートストラップによって提供されるすべての時間.rowの値を変更する必要がありますか？デフォルト値は

.row{margin-right: -15px;} 

EDITです：コードはコードのようにフォーマットされ、今

Answer 1

ブートストラップのドキュメントで述べたように、containerはクラスrowが含まれている必要があり、トップレベルのラッピングクラス、でなければなりません。あなたはこれらのクラスを入れ替えました。私はこれが問題の理由だと思う。ブートストラップ導入の

最初のルールは言う：

行が適切な整列およびパディングのため.container（固定幅）または.container流体（全幅）内に配置されなければなりません。

コードになります

<div class="container"> 
<div class="row"> 
    <div class="col-md-4 col-md-offset-4"> 
    <div class="login-wrapper"> 
     <div class="login-head"> 
      <h3 class="text-center"> Log in </h3> 
     </div> 

     <form> 
      <div class="form-group"> 
      <label for="email" class="sr-only"> Email </label> 
      <input type="text" placeholder="email here" class="form-control"> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="sr-only"> Password </label> 
      <input type="text" placeholder="Password here" class="form-control"> 
      </div> 

      <button type="button" class="btn btn-danger center-block"> Login </button> 

     </form> 

    </div> 
    </div> 
</div> 
</div>