使用 simple_form 附加/前置引导程序图标 [英] Append/prepend bootstrap icons with simple_form

问题描述

Twitter Bootstrap 图标非常致命在这里看到.

Twitter Bootstrap icons are pretty deadly seen here.

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

Look at the bottom right hand corner of that section. See that email with an icon prepended? That is what I want to do. I want to make simple_form and boostrap play nicely.

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

Here's what I've found that will prepend the icon to the input:

= 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 文件):

But it isn't flush (that could be fixed by changing offsets in CSS) and it's pretty ugly. For reference, here is the CSS fix (add it to your bootstrap_overrides.css.less file):

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

有人知道用 bootstrap 将 simple_form 前置或附加一个图标的更简单的方法吗?

Does someone know a less hacky way to make simple_form prepend or append an icon with bootstrap?

下面的回答让我又看了一遍.HAML 通常会在任何地方添加空格，但有一个解决方法

The answer below made me have another look at it. HAML usually adds whitespace everywhere, but there is a workaround

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

Here is an update for the original HAML which removes the whitespaces and doesn't require the CSS hack:

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

比 (>) 稍大一点的差别就大了.输出 HTML 在输入和跨度之间没有换行符.

That little greater than (>) makes all the difference. The output HTML has no newlines between the input and the span.

推荐答案

这是由于呈现的 input 和 span 元素之间存在空白.在这种情况下，换行符.

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

我对 HAML 不够熟悉，无法告诉您如何消除空格，但等效的 ERB 将类似于:

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

这篇关于使用 simple_form 附加/前置引导程序图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！