Question

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

我使用FireFox上了FireBug，并在twitter bootstrap网站上复制了他们用于示例的确切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]。

附加按钮也不会被注册为附加（也可以从示例中复制代码），如下所示:( ....输入....）（按钮）而不是（....输入.... ] [按钮）

关于我如何达到这个目标的任何想法:( span）[....输入....] [按钮]？我已经尝试过以下代码：

<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>

我感谢所有人的帮助！

Answer 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设置上对此进行了测试，并且显示正确。

使用bootstrap在rails上使用ruby - 将文本和附加按钮添加到表单中的输入字段

1 个答案: