twitter-bootstrap 为什么在 Bootstrap 中输入后没有换行符

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17258222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:24:37  来源:igfitidea点击:

Why No Line Break After Input In Bootstrap

htmlcsstwitter-bootstrap

提问by Sajan Parikh

Here is the code that I'm using for a simple form. I pretty much copied the entire form from the example on Bootstrap's website, and removed all controls except a text input and the submit button.

这是我用于简单表单的代码。我几乎从 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>

For some reason, the submit button doesn't drop to a new line when it comes right after an input.

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

Demonstration of it not working.

证明它不起作用。

You'll see, if I just add the checkbox w/ label back from the example, the submit button drops to a new line as expected.

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

<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>

Working when button does not come after text input.

在文本输入后按钮不出现时工作。

What am I doing wrong? I'm using the latest bootstrap CSS and JS (2.3.2), loaded from BootstrapCDN.com.

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

回答by Artyom Neustroev

Both <input>and <button>have display: inline-block.
<label>has display: blockand forces button to be rendered on the next line.

双方<input><button>display: inline-block
<label>hasdisplay: block并强制按钮在下一行呈现。



The workaround for displaying button in the next line is simply wrap it in an element with display: block, i.e. in a <div>element.
Look at this FIDDLE DEMO

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