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