bootstrap label 和 input 一行显示

最新推荐文章于 2022-08-31 11:13:24 发布

.Passion

最新推荐文章于 2022-08-31 11:13:24 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_23350817/article/details/84072868

前端同时被 2 个专栏收录

43 篇文章

订阅专栏

bootstrap

8 篇文章

订阅专栏

本文分享了一种在前端开发中使label和input元素在同一行显示的实用代码片段，通过自定义宏实现美观且响应式的表单布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

label和 input放到一行显示

自己总结的代码片段

<#-- label 和 input一行显示 label默认值和 id 一样-->
<#macro formLineInput id placeHolder=id  label=id type="text">

    <div class="form-group" style="width: 600px">
        <label  class="form-label col-sm-2 custom-control-label control-label" for="${id}">${label}</label>
        <div class="col-sm-10">
            <input  class="form-control" id="${id}" placeholder="${placeHolder}" type="${type}">
        </div>
    </div>

</#macro>

竖直 form


<#macro horizonForm id method action>
    <form class="form-horizontal" role="form" action="${action}" method="${method}" id="${id}">
        <#nested />
    </form>
</#macro>