0

我正在做一个小项目，并决定使用 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>

一切都很好

如果我将 a 添加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代码中没有内联的元素会导致问题，但我没有遇到过这种情况，即使所有内容都是内联的，问题仍然存在。

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

4

1 回答 1

2

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

您的示例在此处更新：

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

于 2013-02-21T21:21:20.913 回答