我有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] 删除。
我来说两句