javascript - Bootstrap 按钮动态添加，呈现方式与标记中声明的按钮不同

Question

如标题所示..

我有这样的标记:

.spancenter {
    margin:0 auto !important; 
    float:none !important;
    text-align:center !important;
}

<div class="row-fluid">
    <div class="span12">
        <div class="spancenter">
            <input id="btnSave" name="btnSave" class="btn" type="button" value="Save" />
            <input id="btnCancel" name="btnCancel" class="btn" type="button" value="Cancel" />
        </div>
    </div>
</div>

如果我通过 AJAX 获取该 HTML(即字面上说 $('#divWrapper').html(thehtml); 它呈现不同:

(上一个来自 AJAX，下一个是静态标记)

在 Firebug 中它们看起来是一样的。

为什么它们呈现不同？

Answer 1

输入是内联元素，因此在 HTML 中，就像上面的例子一样，它们之间会有一个空格。有几种方法可以摆脱它，其中一种是编写不带空格的 HTML，例如

<input type="button"
/><input type="button" />

或

<input type="button" /><input type="button" />

您的 AJAX 响应可能是一个没有任何空格的字符串，所以这就像使用这个 hack。这就是按钮不同的原因。

至于一般外观——它们是一样的。只需从底部行中取出按钮，然后将它们放在顶部原始的顶部 — 您会发现这是一种错觉。