Twitter引导程序：在输入右侧和搜索表单中嵌套输入前置

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浏览器中，它看起来如下所示：

我是否在使用bootstrap执行“非法”操作？我还没有进行任何调整，所以它完全是开箱即用的。

非常感谢任何帮助！

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

这已经过时了，但它帮助我确定了我想要的答案：

问题可能是bootstrap将输入的宽度设置为210px，这导致整个图标/输入/按钮分组比你的更宽。

我更新了上面发布的小提琴Andres，其中包含了问题的一个示例，方法是将井形强制为宽度小于默认值，并使用宽度较小的输入类进行修复。

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