Bootstrap中提高我们的表单布局主要分为两种:
- 行内表单(内联表单)
- 水平表单
Bootstrap中的表单布局行内表单
行内布局只需要在 < from > 标签中添加一个form-inline 的class 可使其内容左对齐并且表现为 inline-block 级别的控件。
<form class="form-inline">
</form>
但是该class只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。如图:
行内表单代码:
<form class="form-inline">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control" id="username" placeholder="请输入你的名字">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
<button type="r" class="btn btn-primary">注册</button>
</form>
Bootstrap中的表单布局水平表单
给表单添加 .form-horizontal 类,可以将 label 标签和控件组水平并排布局。添加 .form-horizontal 类会改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 control-label">姓名:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="username" placeholder="请输入你的名字">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-md-2 control-label">密码:</label>
<div class="col-md-5">
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-5">
<button type="submit" class="btn btn-default">登录</button>
<button type="r" class="btn btn-primary">注册</button>
</div>
</div>
</form>
但是这里优势会出现一个小问题就是网页的底部的滚动条出现 如图:
而我们大多数情况下都不希望网页底部出现滚动条 。出现滚动条的原因是因为改变过后的.form-group 的样式
清除.form-horizontal .form-group 中的margin-right底部滚动条消失;
所有我们只需要设置margin-right: 0;即可