Question

我已经摆弄了CSS（主要是显示和行高）以强制它提交，但我想知道框架已经内置了什么？

这是一个例子： http://jsfiddle.net/marvhen/MeB6g/19/

<p>WITH BOOTSTRAP: The 3 text boxes in this form are inline when there
                   is enough space. When the container gets smaller they 
                   all stack and line up vertically but they all do this 
                   at the same time.</p>
<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="a">Email address</label>
                <input type="text" class="form-control" id="a" placeholder="a" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="b">Password</label>
                <input type="text" class="form-control" id="b" placeholder="b" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="c">Password</label>
                <input type="text" class="form-control" id="c" placeholder="c" />
            </div>
        </form>
    </div>
</div>
<hr />
<p>WITHOUT BOOTSRAP: The 3 text boxes in this form are also inline when 
                     there is enough space. As the browser gets smaller 
                     however, they begin to wrap around one at a time until 
                     all 3 are lined up vertically.</p>
<div>
    <form>
        <div style="display:inline;">
            <input type="text" id="d" />
        </div>
        <div style="display:inline;">
            <input type="text" id="e" />
        </div>
        <div style="display:inline;">
            <input type="text" id="f" />
        </div>
    </form>
</div>

Answer 1

Bootstrap的CSS使用媒体查询将表单控件堆叠在小于768像素的屏幕宽度上。要覆盖它，你可以像这样使用CSS ......

.form-inline .form-control {
    width:auto;
}
.form-inline .form-group {
    display: inline-block;
}

演示：http://www.bootply.com/131062

Bootstrap内联表单控制所有包装，同时它们的容器变窄。如何让它们单独包装？

1 个答案: