將複選框與標籤內嵌放置

Bootstrap文檔和SO答案似乎不會爲我回答這個問題。我想把一個複選框放在它的標籤旁邊。這很簡單。我一定做錯了什麼，但不能弄明白。將複選框與標籤內嵌放置

我使用：

#gemfile.lock, in my Rails application. 

bootstrap-sass (3.1.1.1) 
rails (4.0.3)

在我的Rails查看：

# devise/registrations/new.html.erb 
    <%= f.label :accept_terms, class: "checkbox" do %> 
    <%= f.check_box :accept_terms %> I agree to the terms and conditions listed here 
    <% end %>

產生下面的HTML：

<label class="checkbox" for="user_accept_terms"> 
    <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1"> I agree to the terms and conditions listed here 
    </label>

或者，在視圖中：

# devise/registrations/new.html.erb 
    <%= f.label :accept_terms, "I agree to the terms and conditions listed here", class: "checkbox" %> 
    <%= f.check_box :accept_terms %>

其產生HTML：

<label class="checkbox" for="user_accept_terms">I agree to the terms and conditions listed here</label> 
    <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1">

兩個嘗試導致的複選框，標籤出現在不同的行。

我甚至嘗試手動更改塊顯示屬性（成功，根據丁目的檢查）：

#user_accept_terms { display: inline;} 
label.checkbox { display: inline; }

我怎樣才能得到這些元素的行爲？

預先感謝您。

來源

2014-06-25 steel

只要刪除塊do...end

<fieldset> 
    <%= f.label :accept_terms, class: "checkbox" %> 
    <%= f.check_box :accept_terms %> 
    </fieldset>

來源

2014-06-25 20:49:55

我想，原來。同樣的結果。我已更新我的問題以顯示代碼的外觀。 – steel

什麼類的形式？看起來像引導覆蓋你'css' –

沒有特殊的表格類。只是試圖複製bootstrap基本示例：http://getbootstrap.com/css/#forms – steel

您可以修改下面的例子來工作？

<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Remember me 
    </label> 
</div>

我不知道究竟是如何如何讓軌道生成類型的代碼你，但，這似乎是引導文檔推薦的方式...... Docs

來源

2014-06-25 21:36:11

我已經嘗試了這一點，使用div和複選框以及標籤中的文本。Rails提供了更多的細節，我無法壓制，但基本上它看起來像你鍵入的。 – steel

這聽起來像你必須有一些其他的CSS，可能是相互矛盾的是，我嘗試使用標準引導程序模板的HTML，並將它並排顯示給我... –

將複選框與標籤內嵌放置

回答

相關問題