Bootstrap - checkbox와 label을 수평으로 맞추는 CSS



하고 싶은 일


  • 잘 보면 미묘하게 갖추어지지 않은 checkbox와 label를 수평으로 일직선으로 하고 싶다.
  • 간단하고 간단하게 할 수 없었기 때문에 메모.

  • 환경


  • Ruby 2.2.1
  • Rails 4.2.3
  • bootstrap
  • 그 외

  • Before




    label의 문자가 조금 위쪽으로 어긋나 있다.

    After





    View 성공 예


    .form-inline
      .checkbox
        %label
          = f.check_box :rooms, options, checked_value, unchecked_value
          = room_name
    
    # Deviseのフォーム
    - if devise_mapping.rememberable?
      .field.form-group
        .form-inline
          .checkbox
            = f.check_box :remember_me
            = f.label :remember_me
    

    문제 해결 CSS


    
    @media (min-width: 768px) {
      .form-inline .radio input[type="radio"],
      .form-inline .checkbox input[type="checkbox"] {
        float: left;
        margin-right: 5px;
        label {
          font-weight: normal;
        }
      }
    }
    

    참고문헌



    문제 해결 CSS는 다음 StackOverflow에서 배웠습니다.
    Bootstrap 3 form checkbox label doesn't align with checkbox input in Chromium + Firefox

    좋은 웹페이지 즐겨찾기