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/

相关推荐