Question

我正在开发一个小项目并决定使用Twitter Bootstrap，因为我不擅长设计！

当我尝试将它们与input-append类组合以使它们具有相同的大小时，我遇到了input-prepend和.spanX元素的问题。

目前这是问题

当我这样做时：

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

一切都很好

如果我在前置元素中添加spanX，则效果非常好。

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

但是，如果我尝试将spanX元素添加到附加元素，它将不再起作用并且布局被破坏

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="span2 add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

所有人都有同样的问题吗？我查看了网站，但没有找到与此问题相关的任何内容。

我知道有时span元素在代码中不是内联的这一事实导致了问题，但我没有遇到这种情况，即使一切都是内联的，问题仍然存在。

感谢阅读。任何帮助或建议欢迎=）

Answer 1

所有span*类都附带float:left;声明 - 这就是造成问题的原因。您可能最好创建一个类并根据需要定义宽度。那么你就不会得到使用span类带来的麻烦浮动。

您的示例在此处更新：

http://jsfiddle.net/dusthaines/77XEk/3/

结合输入附加输入 - 前置附加组件和spanX类

1 个答案: