Что случилось с моим кодом?

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

Как уже упоминалось в Bootstrap документы, 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>