bootstrap的响应式,如何让表单排成一行?
1个回答
展开全部
在bootstrap框架中普通的表单相当于块级元素,也就是说一个默认的表单会占据一行。
如何让自己想要的表单排成一行呢?也就是官方文档中所说的内联表单。
为form表单加上.form-inline类可使元素左对齐,相当于给表单加上了 inline-block控件。但是要保证视窗宽度最小为768px宽,不然的话表单会折叠
至于折叠后是什么效果或者折叠是什么意思自己测试一下就可以了。相应的浏览器都有这个插件,我比较喜欢用firefox。这个看自己的了http://www.isoftvip.com
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> 如果在label标签中加入.sr-only类则不会显示多余的文字,也就是这样
如何让自己想要的表单排成一行呢?也就是官方文档中所说的内联表单。
为form表单加上.form-inline类可使元素左对齐,相当于给表单加上了 inline-block控件。但是要保证视窗宽度最小为768px宽,不然的话表单会折叠
至于折叠后是什么效果或者折叠是什么意思自己测试一下就可以了。相应的浏览器都有这个插件,我比较喜欢用firefox。这个看自己的了http://www.isoftvip.com
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> 如果在label标签中加入.sr-only类则不会显示多余的文字,也就是这样
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询