使用 simple_form 附加/前置引导图标答案

【问题标题】：Append/prepend bootstrap icons with simple_form使用 simple_form 附加/前置引导图标
【发布时间】：2012-05-11 07:50:50
【问题描述】：

Twitter Bootstrap 图标非常致命seen here。

查看该部分的右下角。看到那封带有图标的电子邮件了吗？这就是我想做的。我想让 simple_form 和 boostrap 玩得很好。

这是我发现的将图标添加到输入的内容：

= f.input :email, :wrapper => :append do
  = f.input_field :email
  <span class="add-on"><i class="icon-envelope"></i></span>

但它不是齐平的（可以通过更改 CSS 中的偏移量来解决）而且它非常难看。作为参考，这里是 CSS 修复（将其添加到 bootstrap_overrides.css.less 文件中）：

.input-prepend .add-on,
.input-append input {
  float: left; }

有人知道用引导程序在 simple_form 前面添加或附加图标的不那么老套的方法吗？

更新：

下面的答案让我又看了一遍。 HAML 通常会在各处添加空格，但有一个workaround

这里是原始 HAML 的更新，它删除了空格并且不需要 CSS hack：

= f.input :email, :wrapper => :append do
  = f.input_field :email
  %span.add-on>
    %i.icon-envelope

比 (>) 稍大一点就完全不同了。输出 HTML 在输入和跨度之间没有换行符。

【问题讨论】：

stackoverflow.com/questions/10033572/…的可能重复
你可以写%span.add-on而不是%span(class="add-on")（与icon-envelope相同）
并且我使用了 %span.add-on> @ \n = f.text_field :twitter

标签： ruby-on-rails-3 twitter-bootstrap simple-form

【解决方案1】：

这是由于渲染的 input 和 span 元素之间的空白所致。在这种情况下，换行符。

我对 HAML 不够熟悉，无法告诉您如何消除空格，但等效的 ERB 会是这样的：

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>

【讨论】：

HAML 可以直接使用 :erb 和缩进处理 ERB。但是，您将我推向了正确的方向，以解决这个问题。这是一个可行的解决方案（请参阅原始帖子的更新）。
使用这种方法你会丢失占位符和其他选项，这很可悲:(
是的，知道如何在其中获取其他选项（占位符等）吗？

【解决方案2】：

我想出了一个更好的方法来做到这一点，保持placeholder、label 和其他选项不变。

对于仍在使用旧 Bootstrap 2.3.x 的用户

<div class="input-prepend">
  <span class="add-on">@</span>
  <%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>

关键是使用f.input_field 删除所有 div 包装器。

更新

您可以使用其他解决方案来包含占位符，但您无法使用该解决方案删除标签。

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>

【讨论】：