2012-08-09 2 views
2

트위터 부트 스트랩을 사용하고 있습니다.레일 및 Formtastic : 오른쪽에있는 확인란의 레이블을 표시하는 방법?

는 다음 코드 ...

<div class="row"> 
    <div class="span5"> 
    <%= f.input :is_authorized_to_leave_with_child %> 
    <%= f.input :is_emergency_contact %> 
    </div> 
    <div class="span5"> 
    </div> 
</div> 

문제는, 라벨이 왼쪽에 표시되고 오른쪽에있는 체크 박스가 있습니다. 트위터 부트 스트랩 샘플 폼 체크 박스 섹션의 모양과 정반대로 체크 아웃하십시오 : http://twitter.github.com/bootstrap/base-css.html#forms

체크 상자는 오른쪽에 있고 레이블은 오른쪽에 있습니다. 그렇게 표시하려면 어떻게해야합니까?

답변

3

formtastic 2.x부터 app/inputs/#{ input_name.underscore }_input.rb 파일을 사용하여 기존 입력의 동작을 다시 정의 할 수 있습니다.

BooleanInput의 기본 동작은 다음과 같습니다

<label> 
    <input /> 
</label> 

이 논리를 사용합니다 : 그래서

check_box_html << "" << label_text 

을 다음과 같은 레이아웃을 생성 label_text_with_embedded_checkbox를 호출 label_with_nested_checkbox를 호출 to_html 방법, 전화 , 당신이해야 할 일은이 코드를 사용하여 app/inputs/boolean_input.rb 파일을 만듭니다 :

class BooleanInput < Formtastic::Inputs::BooleanInput 
def label_text_with_embedded_checkbox 
     label_text << "" << check_box_html 
    end 
end 

그리고 입력 보이게하는 app/assets/formtastic-ie7.css 파일을 변경 더 예쁜 비트 : 여기 보이는 방법

.formtastic .boolean label input { 
    left:-4px; 
} 

같은 :

enter image description here