css - Ruby on Rails - Bootstrap/Form_for vs input_groups - 如何停止样式冲突

Question

我正在研究我的 Rails 元素的一些输入框。

我对第一个例子有点着迷 given here .我喜欢小的“@”缺口，可以用它来向我们的用户提示格式。

他们的代码是这样的:

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

如果我将它放入我的 Rails View 中，它会完美运行并且看起来很棒。

但是我的表单设置是使用 form_for 函数运行的，我很难让这两者很好地发挥作用。

我的 rails 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>

我尝试过以各种方式将这两段代码包装在一起，但没有效果!

一般常量是我的 rails 代码总是出现硬矩形边缘(与 Bootstrap 平滑曲线相比)，我无法让输入组插件舒适地坐在输入字段的末尾，它以各种方式骑在上面在下方或笨拙地坐在较大的表格 block 上等...所以我失败了。有人有任何见解吗？

就我使用的与 bootstrap 相关的 gems 而言:

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

Answer 1

您遇到的问题是 form_for 正在使用 rails FormBuilder 生成您的表单，而方法 text_field 正在转换为特定的一段html。您可以通过创建自己的表单生成器让它创建不同的 html 片段。如果您选择使用另一个 gem，例如 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 %>