Bootstrap实现水平排列的表单

前端技术 2023/09/08 JavaScript

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

1、向父 <form> 元素添加 class .form-horizontal。
2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
3、向标签添加 class .control-label。

实现代码：

<form class=\"form-horizontal\" role=\"form\"> 
 <div class=\"form-group\"> 
  <label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email</label> 
  <div class=\"col-sm-10\"> 
   <input type=\"email\" class=\"form-control\" id=\"inputEmail3\" placeholder=\"Email\"> 
  </div> 
 </div> 
 <div class=\"form-group\"> 
  <label for=\"inputPassword3\" class=\"col-sm-2 control-label\">Password</label> 
  <div class=\"col-sm-10\"> 
   <input type=\"password\" class=\"form-control\" id=\"inputPassword3\" placeholder=\"Password\"> 
  </div> 
 </div> 
 <div class=\"form-group\"> 
  <div class=\"col-sm-offset-2 col-sm-10\"> 
   <div class=\"checkbox\"> 
    <label> 
     <input type=\"checkbox\"> Remember me 
    </label> 
   </div> 
  </div> 
 </div> 
 <div class=\"form-group\"> 
  <div class=\"col-sm-offset-2 col-sm-10\"> 
   <button type=\"submit\" class=\"btn btn-default\">Sign in</button> 
  </div> 
 </div> 
</form>

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/20985

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案