Bootstrap - checkbox와 label을 수평으로 맞추는 CSS
하고 싶은 일
환경
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
Reference
이 문제에 관하여(Bootstrap - checkbox와 label을 수평으로 맞추는 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mnishiguchi/items/590d9d17d1c2004bf391
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.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
@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
Reference
이 문제에 관하여(Bootstrap - checkbox와 label을 수평으로 맞추는 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mnishiguchi/items/590d9d17d1c2004bf391
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Bootstrap - checkbox와 label을 수평으로 맞추는 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mnishiguchi/items/590d9d17d1c2004bf391텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)