Twitter Bootstrap以HTML元素的换行符呈现不同的呈现方式

Question

我在这里报道的问题让我疯狂，因为我认为这是一个CSS问题。事实证明，根据HTML中是否包含换行符，Bootstrap会以不同的方式呈现我的一个表单。在一个实例中，控件呈现时它们之间没有可见空间，而在另一个实例中，它们间隔很小。

您可以在此处查看效果：http://jsfiddle.net/JTvH7/1/

在代码中，表单重复两次。标记是相同的，只是第一个版本全部在一行上，第二个版本被整理并在元素之间有换行符。

<form><div class="form-horizontal"><select id="species"><option value="cat">Cat</option><option value="dog">Dog</option></select><button class="btn btn-primary">Next&nbsp;<i class="icon-chevron-right icon-white"></i></button><button class="btn btn-warning">Cancel</button></div></form>

<form>
    <div class="form-horizontal">
        <select id="Select2">
            <option value="cat">Cat</option>
            <option value="dog">Dog</option>
        </select>
        <button class="btn btn-primary">Next&nbsp;<i class="icon-chevron-right icon-white"></i></button>
        <button class="btn btn-warning">Cancel</button>
    </div>
</form>

我真的想自动生成一些我的HTML（使用jQuery .html），这意味着我将把所有一线版本注入到我的页面上，因此渲染不正确。一个丑陋的基本解决方法是将 放在控件之间，但我非常想避免这种情况。

有没有人遇到并克服了这个问题？我很想在Bootstrap的github中报告它。

Answer 1

问题在于浏览器将空格，换行符和制表符解释为单个空格。所以这与它们之间的 相同。

定位按钮的正确方法是使用css。例如。 bootstrap有按钮的.btn-toolbar类。你只需要为select添加一些css规则。

.btn-toolbar > select + .btn {
    margin-left: 5px;
}

http://jsfiddle.net/JTvH7/2/