26

Twitter Bootstrap 图标在这里非常致命。

查看该部分的右下角。看到那封带有图标的电子邮件了吗？这就是我想做的。我想让 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 通常会在任何地方添加空格，但有一种解决方法

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

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

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

4

2 回答 2

39

It's due to whitespace between the rendered input and span elements. In this case, a line break.

I am not familiar enough with HAML to tell you how to eliminate the whitespace, but the equivalent ERB would go something like:

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>
于 2012-05-28T15:28:59.387 回答
1

我想出了一个更好的方法来做到这一点，保持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 %>
于 2014-09-24T17:31:50.300 回答