在Bootstrap 4中,可以使用内联表单(inline form)来实现窗体标签与控件的右侧对齐。内联表单是一种布局方式,可以将表单的标签和控件放在同一行显示。
要实现窗体标签与控件的右侧对齐,可以按照以下步骤进行操作:
form-inline
类,使其成为内联表单的容器。<label>
元素来表示窗体标签,并为其添加 sr-only
类,以隐藏标签的文字。<label>
元素后面添加一个控件,例如 <input>
或 <select>
元素。ml-auto
类将最后一个控件向右对齐。以下是一个示例代码:
<form class="form-inline">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="Name">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email" placeholder="Email">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
在上述示例中,form-inline
类将表单设置为内联表单。每个窗体标签都使用 <label>
元素表示,并使用 sr-only
类隐藏标签的文字。控件使用 <input>
元素表示,并添加了 form-control
类来应用Bootstrap的样式。最后一个控件使用 ml-auto
类将其向右对齐。
这样,窗体标签和控件就会在同一行显示,并且控件会靠右对齐。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。