twitter-bootstrap – Bootstrap内联表单控制所有包装,同时它们

发布时间：2020-12-18 00:21:19 所属栏目：安全来源：网络整理

导读：我已经摆弄了CSS(主要是显示和行高)以强制它提交,但我想知道框架已经内置了什么？这是一个例子： http://jsfiddle.net/marvhen/MeB6g/19/ pWITH BOOTSTRAP: The 3 text boxes in this form are inline when there is enough space. When the container gets

我已经摆弄了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>

解决方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!