Question

Twitter Bootstrap icons are pretty deadly seen here.

看看该款的底右侧角。 See that email with an icon preplot? 这就是我想要做的事。我想简单地说,“仿照”和“激化”。

这里,我发现,这将预先满足投入:

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

但它是 t(可通过改变中枢轴冲抵而加以确定),而且很显然。这里指的是CSS的固定装置(代之以您的圈子——穷over。

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

是否有人知道一种不太宽松的方式来简单地——格式的预支或与boot相连接?

Update:

下面的回答让我再看一看。 HAML通常在各地增加白色空间,但有一个workaround 。

这里是原先的哈马法(HAML)的最新版本,该版本拆除了白天空,并且不需要圣公会的黑板:

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

这比(和)小得多。产出超文本在投入和时间之间没有新线。

Answer 1

这是因为在填妥的<代码>input和span要素之间有白色空间。在这种情况下,一线中断。

我并不太熟悉哈马法,告诉你如何消除白人空间,但同等的欧洲航天局将采取类似行动:

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

Answer 2

我以更好的方式这样做,以保留<编码> 替代持有人、label<>/code>和其他不切合实际的选择。



对于仍在使用旧诱杀装置的人,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去除所有包装。

<>>>>>

你可以利用其他解决办法,包括一名持地人,但你不能用这种办法删除标签。

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

Update:

友情链接