如何设计控制下拉菜单和复选框并排在旁边 MVC 5 Bootstrap 4

Posted 2023-03-27

【中文标题】如何设计控制下拉菜单和复选框并排在旁边 MVC 5 Bootstrap 4

【英文标题】：How to design control dropdown and check box in line next next to each other MVC 5 Bootstrap 4

【发布时间】：2020-09-06 13:01:03

【问题描述】：

现在控件是这样的，

 <div class="form-horizontal">
<div class="form-group ">
                    @html.LabelFor(model => model.TribeId, @Resource.TribeName, htmlAttributes: new  @class = "control-label col-md-2" )
                    <div class="col-md-4">
                        @Html.DropDownList("TribeId", null, @Resource.SelectTribe, htmlAttributes: new  @class = "form-control" )
                        @Html.ValidationMessageFor(model => model.TribeId, "", new  @class = "text-danger" )
                    </div>
                    <div class="col-lef-1">
                        <input type="checkbox" id="chkTribe" name="" value="">
                        <label>@Resource.Skip</label>
                    </div>
                </div>
</div>

如图所示，

所有下拉菜单都像标签一样，下拉菜单没问题，但我希望下拉菜单旁边的复选框靠近下拉菜单

希望大家多多指教

谢谢

【参考方案1】：

使用这个： 确保您在父 div 中使用类行，以便孩子将在 col-12 内的一行中。 如果您有复选框的位置问题，请使用填充顶部到复选框 div。 希望这是你想要的：

<div class='col-md-12 form-group row'>
    <div class="col-md-12"><label for="test">LABEL</label></div>
    <div class="col-md-3">
        <select name="test" class='form-control'>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="checkbox" id="chkTribe" name="" value="">
        <label>Checkbox</label>
    </div>
</div>