如何设计控件下拉列表和复选框并排排列 MVC 5 Bootstrap 4

Question

现在控件是这样的，

 <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>

如图所示，

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

希望大家多多指教

谢谢

Answer 1

使用这个：确保在父级 div 中使用 class 行，这样子级将在 col-12 中排成一行。如果您有复选框的位置问题，请使用 padding top to checkbox 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>

如何设计控件下拉列表和复选框并排排列 MVC 5 Bootstrap 4

How to design control dropdown and check box in line next next to each other MVC 5 Bootstrap 4

css

c#

asp.net-mvc

asp.net-mvc-5

bootstrap-4