Bootstrap表单布局行内表单和水平表单

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;即可