26

Twitterのブートストラップアイコンはここでかなり致命的に見られます。

そのセクションの右下隅を見てください。アイコンが前に付いたメールをご覧ください。それが私がやりたいことです。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には、入力とスパンの間に改行がありません。

4

2 に答える 2

39

これは、レンダリングされた要素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 %>
于 2012-05-28T15:28:59.387 に答える
1

、、およびその他のオプションをそのまま維持するためplaceholderに、これを行うためのより良い方法を考え出しました。label

古いBootstrap2.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 に答える