将 html 中的 Ruby 块添加到输入类 - Twitter Bootstrap答案

【问题标题】：Adding a Ruby Block in html to an input class - Twitter Bootstrap将 html 中的 Ruby 块添加到输入类 - Twitter Bootstrap
【发布时间】：2012-12-07 03:19:31
【问题描述】：

我正在尝试将 ruby 块添加到 HTML 文件中的 span 类中。

<%= f.label :email =>

div&span类如下：

<div class="input-prepend">
    <span class="add-on">
        <i class="icon-envelope"></i>
    </span>
    <input class="span" id="prependedInput" type="text" placeholder="">
</div>

我已将 ruby 块放在输入类中：

<div class="input-prepend">
    <span class="add-on">
        <i class="icon-envelope"></i>
    </span>
    <input class="span <%= f.text_field :email %>" id="prependedInput" type="text" placeholder="">
</div>

我正在使用 Twitter Bootstrap，这是将 ruby 块放置在 divs/spans/或输入标签内的正确方法吗？

我想要做的是在输入字段中添加一个图标。当我提交文本时，它确实有效。它只是看起来很奇怪，代码和实际对象。

【问题讨论】：

你试过运行它吗？不要以为这是你想要的。这样做是在你的<span> 的类属性中输出一个<input>，这是行不通的。请更新您的问题以描述您实际想要做什么。

标签： css twitter-bootstrap

【解决方案1】：

我怀疑这可能是你所追求的：

<div class="input-prepend">
  <span class="add-on"><i class="icon-envelope"></i></span>
  <%= f.text_field :email, :id => "prependedInput" %>
</div>

【讨论】：

这部分有效，问题是文本字段宽度太小而长度太长。此外，它在 safari form FF 中看起来也有所不同。
这超出了这个问题的范围，真的。但是，如果您查看引导文档，您会发现您可以通过向文本字段添加一个类来调整字段的大小。