Css 小容器中的引导输入附加溢出

在Bootstrap 2.3.2中，如果您需要一个带有

附加组件的流体宽度文本字段，那么这似乎很尴尬

如果包含的
div
小于输入字段，则带有
span12
类的
input
将很高兴地调整大小

但是，对这个片段执行相同的操作要困难一些

<div class="input-append">
    <input type="text">
    <span class="add-on">Sheep</span>
</div>


羊

有人能解决这个问题吗

这里有一个小把戏：
如果您只有输入，则很容易将其展开以适合家长。如果另一个元素的宽度为%，则多个元素也可以轻松使用。若您有多个元素，而其他元素有固定的宽度或根本并没有明确确定的宽度，那个么问题就会出现。然后您需要一个适合所有父对象剩余空间的元素。据我所知，不可能做出这样的行为。但任何包含输入的本机块级元素都应该做到这一点：

  <div class="input-append">
    <span class="add-on" style="float: right;">Sheep</span>
    <div style="overflow: hidden;">
      <input type="text" class="span12">
    </div>
  </div> 


羊

引导使用一些基于孩子顺序的样式，因此您还应该设置
边框半径：0 3px 3px 0
，因为它不再适用于附加组件。
文本字段的宽度也需要为100%。这里有一个解决方案：“span12”类，您在问题中也提到过，用于确保100%宽度的输入。但当然，除非您在父层次结构中的某个位置使用row fluid类，否则span12是无用的。