表单布局示例
模板中其实有lyear_pages_add_doc.html页面大致的做了表单布局的一个演示,插件项目中的这次示例,为了给大家展示更多的布局方式,示例中只使用基础的一些表单元素。
这里v5和v4有个区别的地方,v5没有了 form-group,所以表单元素的父 div,需要用 mb-3 来保证相邻的div不会叠加在一起。
示例一
标题放在最上面是为了响应式的环境下有较好的体验,不至于因为宽度不够导致文字换行。

示例二
文字和input在同一行,你可以选择响应式的布局,也可以采用固定宽度的方式。

示例三
新增样式 mx-w-800,指定最大宽度,让表单居中,你也可以自己定义。

示例四
使用 input-group-btn 布局。你也可以单独对该表单的 input-group-addon 指定一个最小的宽度。

演示地址:http://lyear.itshubao.com/v5/example/
插件项目中页面名字:lyear_layout_form.html。