如何在引导程序中并排对齐单选按钮?

BraGcobs

我有radioButton,但它们不以某种方式并排对齐,彼此不对齐,并且不利于用户体验。我在下面需要一些帮助,以使其并排对齐(表格线),并留有足够的空间。

 <div class="modal-body">
                        <form class="dl-horizontal">
                            <div class="form-group row">
                                <label for="Text" class="col-sm-2 col-form-label">Add users()by</label>
                            </div>

                            <div class="form-group row">
                                <div class="col-sm-1">
                                    <label for="EmailAddress" class="col-sm-2 col-form-label">EmailAddress</label>
                                    @Html.RadioButtonFor(m => m.EmailAddress, "EmailAddress")
                                </div>
                                <label for="LoginID" class="col-sm-1 col-form-label">LoginID</label>
                                <div class="col-sm-1">
                                    @Html.RadioButtonFor(m => m.LoginID, "LoginID")
                                </div>
                                <label for="SIS_ID" class="col-sm-1 col-form-label">SIS_ID</label>
                                <div class="col-sm-1">
                                    @Html.RadioButtonFor(m => m.SIS_ID, "SIS_ID")
                                </div>
                            </div>



                        </form>
                    </div>
胡安

您需要稍微重新排列代码并分配适当的列宽,以便利用12列系统:

<div class="form-group row">
    <div class="col-sm-4">
        @Html.RadioButtonFor(m => m.EmailAddress, "EmailAddress")
        <label for="EmailAddress" class="col-form-label">EmailAddress</label>
    </div>            
    <div class="col-sm-4">
        @Html.RadioButtonFor(m => m.LoginID, "LoginID")
        <label for="LoginID" class="col-form-label">LoginID</label>
    </div>
    
    <div class="col-sm-4">
        @Html.RadioButtonFor(m => m.SIS_ID, "SIS_ID")
        <label for="SIS_ID" class="col-form-label">SIS_ID</label>
    </div>
</div>

请注意,每个列容器都设置为4(4 x 3 = 12)。我重新排列了标签,使它们出现在单选按钮之后,并取消了它们的引导程序列css类,因为它们不是必需的。我也将它们移入了适当的列容器中。

如果这不起作用,则您的CSS中还有其他样式会干扰您的布局。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

并排对齐按钮-引导程序3

来自分类Dev

引导程序如何将按钮和链接并排对齐

来自分类Dev

单选按钮形式的引导程序

来自分类Dev

在引导程序3中禁用单选按钮?

来自分类Dev

如何在引导程序中按列而不是行对齐

来自分类Dev

如何在引导按钮中对齐字体真棒图标?

来自分类Dev

引导程序并排对齐两列

来自分类Dev

如何在一行中将单选按钮与标签对齐?

来自分类Dev

我如何在引导程序中垂直对齐表单?

来自分类Dev

如何在右对齐引导程序按钮之间添加空间?

来自分类Dev

如何对齐单选按钮?

来自分类Dev

如何在tkinter中并排包装3个单选按钮和1个标签?

来自分类Dev

如何使用引导程序垂直显示单选按钮

来自分类Dev

如何在Shiny R中垂直对齐多个单选按钮列?

来自分类Dev

单击引导程序中的单选按钮时如何折叠其他菜单

来自分类Dev

如何在引导程序中设置按钮文本

来自分类Dev

并排对齐按钮-引导程序3

来自分类Dev

对齐按钮-引导程序3

来自分类Dev

引导程序如何将按钮和链接并排对齐

来自分类Dev

单选按钮形式的引导程序

来自分类Dev

如何在DIV中对齐单选按钮?

来自分类Dev

如何在引导按钮中对齐字体真棒图标?

来自分类Dev

android如何在单选按钮组内对齐单选按钮?

来自分类Dev

如何在引导面板中的选择选项右侧对齐引导按钮

来自分类Dev

如何将按钮与引导程序中的图例对齐?

来自分类Dev

引导程序对齐按钮以形成 td 中的提交按钮

来自分类Dev

如何在 HTML 和 CSS 中对齐单选按钮文本?

来自分类Dev

如何在引导程序 4 中的标签旁边添加单选按钮

来自分类Dev

如何在引导链接按钮中左对齐文本?

Related 相关文章

热门标签

归档