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 - 如何停止风格对接头

回答

相关问题