html - 为什么在引导程序中输入后没有换行符

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 加载的最新引导 CSS 和 JS (2.3.2)。

Answer 1

两者<input>兼有。<button>_ has并强制按钮在下一行呈现。display: inline-block
<label>display: block

---

在下一行显示按钮的解决方法是简单地将其包装在一个带有 的元素中display: block，即在一个<div>元素中。
看看这个FIDDLE DEMO