为什么在Bootstrap中输入后没有换行

Question

这是我用于简单表单的代码.我几乎从Bootstrap网站上的示例中复制了整个表单,并删除了除文本输入和提交按钮之外的所有控件.

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

出于某种原因,提交按钮在输入后立即不会下降到新行.

你会看到,如果我只是从示例中添加带有标签的复选框,则提交按钮将按预期下降到新行.

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <label class="checkbox">
            <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

我究竟做错了什么？我正在使用从BootstrapCDN.com加载的最新bootstrap CSS和JS(2.3.2).

Answer 1

双方<input>并<button>有display: inline-block.
<label>has display: block和force按钮在下一行上呈现.

在下一行显示按钮的解决方法是将其包装在元素中display: block,即在<div>元素中.
看看这个FIDDLE DEMO