详解Bootstrap创建表单的三种格式(一)(2)

其它元素在form的class为form-inline时,display为inLine-block;但是input tyoe = "file"却仍是display:block,可以看出其布局是有问题的,此时可以单独设置其display为inline-block;

水平表单(label和input等表单元素在同一行)

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

1、向父 <form> 元素添加 class .form-horizontal。
     2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
     3、向标签添加 class .control-label。
     4、设置label和其兄弟div的宽度(因为input等默认宽度是100%)。

<body> <form role = "form"> <div class = "form-group"> <label for = "name">姓名</label> <div> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </div> </div> <div class = "form-group"> <label for = "tel">电话号码</label> <div> <input type="text" id = "tel" placeholder = "请输入您的电话号码"></input> </div> </div> <div class = "form-group"> <label for = "idCard">请上传身份证</label> <div> <input type = "file" id = "idCard"></input> </div> </div> <div class = "form-group"> <label for = "profession">选择职业</label> <div> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </div> </div> <div> <div> <button type = "submit">提交</button> </div> </div> </form> </body>

效果:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwxyp.html