Question

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; }

有人知道使用bootstrap制作simple_form prepend或附加图标的方法不那么简单吗？

更新

下面的答案让我再看看它。 HAML通常会在任何地方添加空格，但有一个workaround

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

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

比（＆gt;）稍微大一点就会有所不同。输出HTML在输入和跨度之间没有换行符。

Answer 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 %>

Answer 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 %>

使用simple_form附加/添加引导程序图标

更新

2 个答案: