Bootstrap padding не работает

Question

Я правильно импортировал свой загрузочный файл и, похоже, работает, потому что строки и столбцы работают.

Однако, у меня есть этот файл, который использует форму:

.container 
    .row 
     .col-x-12.col-md-6 
      form.form-horizontal(action="/location", method="get", role="form") 

       .form-group 
        label.col-xs-10.col-sm-2.control-label(for="name") name 
        .col.xs-12.col-sm-10 
         input#name.form-control(name="name") 

       .form-group 
        label.col-xs-10.col-sm-2.control-label(for="rating") rating 
        .col-xs-12.col-sm-10 
         select#rating.form-control.input-sm(name="rating") 
          option 1 
          option 2 
          option 3 
          option 4 
          option 5 

       .form-group 
        label.col-xs-12.col-sm-2.control-label(for="review") review 
        .col-xs-12.col-sm-10 
         textarea#review.form-control(name="review", rows="5") 

       button.btn.btn-default.pull-right Add my review 

Обивка для этого, кажется, не работает. Различные группы форм не разнесены друг от друга. Кроме того, кнопка «Добавить обзор» не тянет вправо.

Предложения?

Answer 1

Ваш первый .col-x-12.col-md-6 не указал (-а). Это должно быть .col-xs-12.col-md-6 для стартеров. Например, вы можете использовать col-xs-offset-1, чтобы задать расстояние между элементами формы.

Answer 2

Сначала проверьте правильность структуры HTML или нет. Если вы используете CSS пользовательского стиля, удалите его и проверьте, что проблема все еще существует. Наконец, поделитесь всем HTML, чтобы посмотреть дальше.

Answer 3

Добавить класс .row класс .form-group.