1

我在这里报告的问题一直让我发疯，因为我认为这是一个 CSS 问题。事实证明，Bootstrap 以不同的方式呈现我的表单之一，具体取决于 HTML 中是否包含换行符。在一种情况下，控件被渲染时它们之间没有可见的空间，而在另一种情况下，它们之间的间距很好。

你可以在这里看到效果：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），这意味着我将把全在线版本注入到我的页面中，因此渲染不正确。一个丑陋的基本解决方法是放在&nbsp;控件之间，但我非常想避免这种情况。

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

4

1 回答 1

0

问题是浏览器将空格、换行符和制表符解释为单个空格。所以这与&nbsp;他们之间的存在是一样的。

定位按钮的正确方法是使用 css。例如，引导程序有.btn-toolbar按钮类。您只需要为选择添加一些 css 规则。

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

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

于 2013-04-01T07:36:49.067 回答