傑克達與瑞兒絲的大小事

快速筆記整理網站開發上碰到的各種技巧和問題,免得年紀大忘光,至少還有一個地方可以查找

解決 simple_form 整合 bootstrap 的 check box 文字無法正確對齊

在專案中使用了整合 bootstrap 樣式的 simple_form ,在處理 devise 會員登入  rember me 的樣式時,發現 label 文字無法正確向左對齊,我希望最後表現出來的結果是像這樣

但實際使用時,在登入頁面執行

<%= f.input :rember_me, :as => :boolean, :label => '記住我' %>

生成的頁面會變成

會發現文字並沒有正確地和 check box 對齊

解決方法:

開啟 config/initializers/simple_form.rb ,加上

config.wrappers :checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|

b.use :tag => 'div', :class => 'controls' do |ba|

ba.use :label_input

end

end

最後將登入頁面的 check_box 執行方式改為

<%= f.input, :remember_me, :as => :boolean, :wrapper => :checkbox, :label => '記住我' %>

再重新整理頁面之後,就會看到文字對齊於 check_box

註: 記得修改 initializers 目錄的檔案,要重新啟動 rails server

參考文章:

https://github.com/plataformatec/simple_form/issues/424#issuecomment-4001247

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: