web-dev-qa-db-ja.com

追加/追加bootstrap simple_formのアイコン

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は通常、どこにでも空白を追加しますが、 回避策 があります

空白を削除し、CSSハックを必要としない元のHAMLの更新は次のとおりです。

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

（>）より少し大きいだけですべての違いが生じます。出力HTMLには、入力とスパンの間に改行がありません。

ruby-on-rails-3twitter-bootstrapsimple-form
26
Tsagadai

これは、レンダリングされた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 %>
39
jcarlson

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ラッパーを削除することです。

[〜＃〜] update [〜＃〜]

他のソリューションを使用してプレースホルダーを含めることはできますが、そのソリューションを使用してラベルを削除することはできません。

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