Rails簡單形式Bootstrap - 複選框內聯垂直對齊

我有一個簡單的形式和引導的rails 4應用程序。Rails簡單形式Bootstrap - 複選框內聯垂直對齊

我在我的表單中有複選框元素。我想使複選框與其他字段中的內容垂直對齊。此時複選框比其他字段中的其餘內容更進一步。

例如：

<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>

有誰知道如何使垂直排列均勻，從而複選框未出的表單元素的其餘部分的左邊？

謝謝

就上述擴大，

我想留的複選框與其他表單元素的左邊緣對齊。目前，它進一步離開（就像該複選框元素上存在某種負邊界）。

我希望所有三個這些現場輸入在左對齊齊平。目前，在這兩個布爾元素的複選框，比第三個文本框進一步左：

<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %> 
<br><br> 


    <%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %> 

<br> 

<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>

來源

2014-09-23 Mel

如果您向我們展示演示會很棒。目前還不清楚你想達到什麼目標。 – ProblemSlover 2014-09-23 11:06:23

嗨 - 我在上面添加了一個例子。兩個複選框元素位於文本輸入元素的左側。我想他們都齊平 – Mel 2014-09-24 07:12:59

由於DOC這裏http://montrezorro.github.io/bootstrap-checkbox/建議你應該有data-label在你的輸入，因此改變你的輸入這樣的：

<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>

如果你想在前面加上然後：

<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>

來源

2014-09-23 11:54:27

嗨尼廷，恐怕我得到一個錯誤，當我嘗試這樣做，其中讀取：語法錯誤，意外的'：'，期待=> – Mel 2014-09-24 08:57:04

嘗試用我更新的答案。我已經使語法對稱。 – 2014-09-24 09:13:08

您是否仍然收到任何錯誤 – 2014-09-24 10:05:33

我做了一個自定義包裝是這樣的：

config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 

    b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba| 
     ba.wrapper tag: 'div', class: 'checkbox' do |baa| 
     baa.use :input 
     end 
     #ba.use :input 
     ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end

在我的情況下，我想要一個簡單的內聯複選框，右邊的標籤位於另一個表單元素的下方。您可能需要玩col-sm-10 col-sm-offset-2。這在你的SimpleForm初始化器中（或者做一個單獨的一行，以避免破壞原始內容）。此外，您需要重新啓動應用以查看更改才能生效。

來源

2017-04-23 04:15:34

Rails簡單形式Bootstrap - 複選框內聯垂直對齊

回答

相關問題