html - Twitter bootstrap：在拉右和搜索表单中嵌套输入前置

Question

以下代码示例代码应生成类似.

<form class="well form-search">
  <div class="pull-right">
    <div class="input-prepend">
      <span class="add-on">
        <i class="icon-search"></i>
      </span>
      <input type="text" class="input-large search-query" />
    </div>
    <button class="btn" type="submit">Search</button>
  </div>
</form>

这在 Firefox 中运行良好，但在 Chrome 和 Internet Explorer 7 浏览器中，它看起来如下所示：

我在用引导程序做一些“非法”的事情吗？我还没有进行任何调整，所以它完全是开箱即用的。

任何帮助是极大的赞赏！

Answer 1

这是一个报告的问题：https ://github.com/twitter/bootstrap/issues/1362

tonybolzan 在问题中概述的修复效果最好，因为您没有明确设置宽度：

.input-prepend, .input-append {
    white-space: nowrap;
    -webkit-padding-end: 27px;
}

Answer 2

问题在于您的标记中发现的空白，尝试将span标记放在与输入相同的行上，如下所示：

<form class="well form-search">
  <div class="pull-right">
    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
        </div>
        <button class="btn" type="submit">Search</button>
    </div>
  </div>
</form>

Answer 3

这是旧的，但它帮助我确定了我正在寻找的答案：

问题可能是引导程序将输入的宽度设置为 210px，这导致整个图标/输入/按钮分组比您的井宽。

我已经用问题的示例更新了上面发布的小提琴 Andres，方法是强制井形式的宽度小于默认宽度，并使用宽度更小的输入类进行修复。

http://jsfiddle.net/dDtUg/2/