Bootstrap4如何创建水平表单(Horizontal form)

bootstrap3提供form-horizontal方式创建水平表单，而bootstrap4去掉了该类定义。

常用的处理方式有二种：

第一种：在<form></form>中定义<div class="form-row"> </div>

然后在form-row下定义列宽（class="col-*-*"）。

<form>

  <div class="form-row">

    <div class="col">

      <input type="text" class="form-control" placeholder="First name">

    </div>

    <div class="col">

      <input type="text" class="form-control" placeholder="Last name">

    </div>

  </div>

</form>

 

再复杂一点的可以在form-row下再定义form-group，在form-group中定义列宽，即把每个form-group当做列处理，而当form-group中再有多个元素时，这些元素会在form-group内部再以堆叠的形式展现（如果页面需要达到这种效果），如下所示：

<form>

  <div class="form-row">

    <div class="form-group col-md-1">

      <label for="i_name">昵称</label>

      <input type="text" class="form-control" id="i_name">

    </div>

  <div class="form-group col-md-2">

      <label for="i_pswd">密码</label>

      <input type="text" class="form-control" id="i_pswd">

    </div>

    ...// 省略其它form-group

  </div>

</from>

 

另外：

bootstrap4新增的.form-row（使左、右外边距向内收5px，margin-right: -5px;margin-left: -5px;），其本意是替换.row的使用（左、右外边距内收15px，margin-right: -15px;margin-left: -15px;）。

form-row与row样式比较：

.form-row {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-right: -5px;

  margin-left: -5px;

}

 

.row {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-right: -15px;

  margin-left: -15px;

}

 

margin设置为负值是让其它元素进入到该元素的border里面，使元素之间看起来更紧凑。

 

第二种方法：

<form></form>元素上不定义样式，.form-group样式增加.row或者.form-row，使.form-group做为行，对其下的label和controls定义列宽（col-*-*），需要注意的是：所有label标签必须添加.col-form-label样式（.col-form-label，.col-form-label-lg，.col-form-label-sm，设置padding-top和padding-bottom的高度）

 

<form>

  <div class="form-group row">

    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group row">

    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  ...省略其它form-group

</form>

 

更多详细用法参考官网：https://v4.bootcss.com/docs/4.0/components/forms/