ruby on rails using bootstrap - 在表单中的输入字段前添加文本和附加按钮答案

【问题标题】：ruby on rails using bootstrap - prepend text and append button to an input field in a formruby on rails using bootstrap - 在表单中的输入字段前添加文本和附加按钮
【发布时间】：2012-05-16 07:08:57
【问题描述】：

我在我的 gemfile 中使用 bootstrap-sass 2.0.0，但是我无法将前置和附加的内容都添加到表单中的输入标记中以正常工作。

我使用 FireFox 进入 FireBug，并复制了他们在 twitter 引导站点上用于示例的确切 html，复制到这里：

div class="control-group">
  <label class="control-label" for="appendedPrependedInput">Append and prepend</label>
  <div class="controls">
    <div class="input-prepend input-append">
      <span class="add-on">$</span>
      <input id="appendedPrependedInput" class="span2" type="text" size="16">
      <span class="add-on">.00</span>
    </div>
  </div>
</div>

但是我得到的前置文本朝向错误的方向（它看起来像附加的标签）所以它看起来像这样：[span)[.....input....][span) 而不是这个: (span][.....输入.....][span) .

附加的按钮也不会注册为附加的（也使用示例中的复制代码），如下所示： (....input....) (button) 而不是 (....input.... .][按钮）

关于我如何做到这一点的任何想法： (span][....input....][button) ？我已经尝试过以下代码：

<form class="form-inline">
  <div class="control-group">
    <div class="controls">
      <div class="input-prepend input-append">
        <span class="add-on">Search</span>
        <input id="search" class="input-xlarge" type="text" size="16">
        <button class="btn" type="button">Go!</button>
      </div>
    </div>
  </div>
</form>

感谢所有帮助！

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您的想法是正确的，您只需将要附加/前置或附加/前置的所有内容放在一行中，没有空格。

像这样：

<form class="form-inline">
  <div class="control-group">
    <div class="controls">
      <div class="input-prepend input-append">
        <span class="add-on">Search</span><input id="search" class="input-xlarge" type="text" size="16"><button class="btn" type="button">Go!</button>
      </div>
    </div>
  </div>
</form>

我在自己的 Bootstrap 设置中对此进行了测试，它可以正常显示。

【讨论】：