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

【问题标题】：Twitter bootstrap: Nest input-prepend within pull-right and search formTwitter bootstrap：在拉右和搜索表单中嵌套输入前置
【发布时间】：2012-05-05 21:35:36
【问题描述】：

以下代码示例代码应生成类似的结果。

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

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

非常感谢任何帮助！

【问题讨论】：

标签： html css internet-explorer google-chrome twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

感谢您的回答！不幸的是，这似乎并不能解决问题——我已经删除了所有的空格，但问题仍然存在......
@Remo 您是否有机会放大您的页面？我在 IE7/8 Chrome Canary build/Chrome17 和 Firefox11 中对其进行了测试，一切正常。表单破坏的唯一实例是当我调整屏幕大小时。我用这个小提琴来测试：jsfiddle.net/dDtUg
感谢您的示例。但在我们的例子中，它仍然不起作用（而且我根本没有缩放）。我在做一些非法嵌套吗？提供的代码可以在body > .container > .row > .span12 下找到。有什么想法吗？
@Remo 根据文档，您的代码在我上面所做的更新中看起来很好，所以一切看起来都很好，我只是想不出任何会导致您的搜索栏像那样中断的事情。是否以任何方式修改了引导程序？能发个测试页让我看看吗？我测试了我在上面发布的小提琴，一切正常，所以它一定是搜索表单周围的其他东西。

【解决方案3】：

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

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

我已经更新了上面发布的小提琴安德烈斯，通过将井形式强制为比默认宽度更小的宽度，并通过使用宽度更小的输入类来修复问题的示例。

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

【讨论】：