Ruby on Rails - Bootstrap/Form_for vs input_groups - 如何停止風格對接頭

我正在玩一些我的rails項目的輸入框。Ruby on Rails - Bootstrap/Form_for vs input_groups - 如何停止風格對接頭

我有點跟第一個例子given here。我喜歡這個小小的'@'缺口，並可以用它來格式化提示給我們的用戶。

他們的代碼看起來是這樣的：

<div class="input-group"> 
    <span class="input-group-addon">@</span> 
    <input type="text" class="form-control" placeholder="Username"> 
</div>

如果我把到我軌查看它完美和看起來不錯。

但我的表單設置正在運行一個form_for函數，並且我正在很快地讓這兩個函數很好地運行。

我軌html.erb代碼如下所示：

<div class="row"> 
    <div class="col-md-6 col-md-offset-4"> 
    <%= form_for @request do |f| %> 
     <%= render 'shared/error_messages' %> 
     <%= f.label :user_id%> 
     <%= f.text_field :user_id%> 
     <%= f.submit "Begin my request", class: "btn btn-primary" %> 
    <% end %> 
    </div> 
</div>

我已經試過包裝的兩段代碼一起以不同的方式，但沒有效果！

一般常量是我的導軌代碼總是出現硬矩形邊緣（與自舉平滑曲線相比），我無法讓input-group-addon舒適地坐在輸入字段的末尾，它以各種方式乘坐上方和下方，或坐在笨拙的大型表格塊等...所以失敗了我的一部分。任何人有任何見解？

在寶石方面相關的引導我使用：

gem 'bootstrap-sass',  '3.2.0.0' 
gem 'sass-rails',   '5.0.0.beta1'

來源

2014-11-24 Huw

你正在運行到是form_for的問題是使用軌道FormBuilder生成您的形式和方法text_field被翻譯成特定的一塊的HTML。你可以通過創建你自己的表單生成器來創建一個不同的html。如果您選擇使用另一個像simple_form的寶石，它會變得更加容易，因爲您可以創建其他類型的字段。您可以查看該gem的文檔以獲取更多信息。

class CustomFormBuilder < ActionView::Helpers::FormBuilder 
    def text_field_with_addon(name, addon, *args) 
    @template.content_tag(:div, 
     @template.content_tag(:span, addon, class: 'input-group-addon') + 
     @template.text_field(name, *args), 
     class: 'input-group') 
    end 
end

然後使用它像：

<%= form_for @request, builder: CustomFormBuilder do |f| %> 
    <%= render 'shared/error_messages' %> 
    <%= f.label :user_id%> 
    <%= f.text_field_with_addon :user_id, '@' %> 
    <%= f.submit "Begin my request", class: "btn btn-primary" %> 
<% end %>

來源

2014-11-24 21:54:18

Ruby on Rails - Bootstrap/Form_for vs input_groups - 如何停止風格對接頭

回答

相關問題