레일에있는 루비에서 부트 스트랩을 사용하여 라디오 버튼이 잘못 표시되는 경우

Question

안녕하세요 저는 새로운 프로그래머이며 다소 복잡한 형식을 만들려고합니다. 나는 부트 스트랩 3과 루비를 레일 4에 사용하고 있습니다. 저는 색상이있는 단위 (일종의 제품)를 만들기위한 형식이 있습니다. 중첩 된 속성을 사용하여 모델 색상에서이 색상을 선택할 수 있습니다. 나는 사용자가 0-9 또는 n 또는 s의 값을 가진 라디오 버튼을 사용하여 색상의 색조를 선택할 수 있도록하고 싶습니다. 이 모든 라디오 버튼을 같은 줄에 넣고 싶지만 스타일에 문제가 있습니다. 나는 그것들을 모두 수직 또는 모든 수평으로 만 만들 수 있지만 모두 겹치고 radio_buttons 뒤의 모든 레이블을 사용합니다. . 내가 어떻게 어떤 정보가 환영받을 :(해결하는 감사를 사전에 아무 생각이

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <%= form_for(@unit) do |f| %> 

    <%= f.label :quantity, "Cantidad:" %> 
    <%= f.number_field :quantity, class: 'form-control' %> 
    <hr> 
... 

    <div class="radio-inline"> 
    <%= f.fields_for :colors do |ff| %> 
     <%= ff.label :hue, "Nombre de tu Marca:" %> 
     <%= ff.radio_button :hue, '0' %> 0 
     <%= ff.radio_button :hue, '1' %> 1 
     <%= ff.radio_button :hue, '2' %> 2 
     <%= ff.radio_button :hue, '3' %> 3 
     <%= ff.radio_button :hue, '4' %> 4 
     <%= ff.radio_button :hue, '5' %> 5 
     <%= ff.radio_button :hue, '6' %> 6 
     <%= ff.radio_button :hue, '7' %> 7 
     <%= ff.radio_button :hue, '8' %> 8 
     <%= ff.radio_button :hue, '9' %> 9 
     <%= ff.radio_button :hue, 'n' %> n 
     <%= ff.radio_button :hue, 's' %> s 
    <% end %> 
    </div> 
.... 
</div> 
</div> 

나는 또한이 결과가 오순절하지 않았다.

<%= f.fields_for :colors do |ff| %> 
     <%= ff.label :hue, "Hue:" %> 
     <div class='radio_inline'><%= ff.radio_button :hue, '0' %> 0</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '1' %> 1</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '2' %> 2</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '3' %> 3</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '4' %> 4</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '5' %> 5</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '6' %> 6</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '7' %> 7</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '8' %> 8</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, '9' %> 9</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, 'n' %> n</div> 
     <div class='radio_inline'><%= ff.radio_button :hue, 's' %> s</div> 
    <% end %> 

Answer 1

을 이 부트 스트랩의 예와 같이 'radio-inline'클래스의 label 태그를 사용하여 각 radio_button을 documentation :

<label class="radio-inline"> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 
</label> 

귀하의 경우, 전체 인라인 양식을 라디오 인라인 div에 넣지 마십시오. 대신과 같이, 라디오 인라인 사업부의 각 라디오 버튼 입력을 포장 :

<%= f.fields_for :colors do |ff| %> 
    <%= ff.label :hue, "Nombre de tu Marca:" %> 
    <div class="radio-inline"> 
    <%= ff.radio_button :hue, '0' %> 0 
    </div> 
    <div class="radio-inline"> 
    <%= ff.radio_button :hue, '1' %> 1 
    </div> 
    <div class="radio-inline"> 
    <%= ff.radio_button :hue, '2' %> 2 
    </div> 
<% end %> 

Answer 2

또한 코드에 :item_wrapper_class => 'inline'를 추가 할 수 있습니다. <%= ff.radio_button, { :item_wrapper_class => 'inline' }, :hue, '6' %> 6