ブートストラップのパディングが機能しない

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には「s」がありません。初心者は.col-xs-12.col-md-6にする必要があります。たとえば、col-xs-offset-1を使用して、フォーム要素の間隔を指定できます。

Answer 2

まず、HTML構造が正しいかどうかを確認します。カスタムスタイルのCSSを使用している場合は、それを削除して問題がまだ存在するかどうかを確認してください。最後に、HTML全体を共有してさらに見てみましょう。

Answer 3

.form-groupクラスを含む.rowクラスを追加します。