Bootstrap输入 - 附加溢出在小容器中

Question

如果你需要一个在Bootstrap 2.3.2中带有add-on的流体宽度文本字段，这似乎很尴尬。

如果包含的div小于输入字段，则input上面有span12类的<div class="input-append"> <input type="text"> <span class="add-on">Sheep</span> </div> 会非常愉快地调整大小。

然而，对此片段做同样的事情有点困难

{{1}}

有没有人有解决方案？

这是一个小提琴：http://jsfiddle.net/KFr2z/149/

Answer 1

如果您单独输入，则很容易将其扩展为适合父级。如果其他元素的宽度为％，则对于多个元素也很容易。如果您有多个元素且其他元素具有固定宽度或根本没有明确确定的宽度，则会出现问题。然后你需要一个适合所有父母剩余空间的元素。据我所知，不可能让输入以这种方式表现。但是任何包含输入的本机块级元素应该可以解决这个问题：

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

Bootstrap根据孩子的顺序使用一些样式，因此你也应该设置border-radius: 0 3px 3px 0，因为它不再适用于附加组件。