부트 스트랩 패딩이 작동하지 않습니다.

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를 사용하는 경우 CSS를 제거하고 여전히 문제가 있는지 확인하십시오. 마지막으로 전체 HTML을 공유하여 더 자세히 살펴보십시오.

Answer 3

.form-group 클래스가있는 .row 클래스를 추가하십시오.