如何设计控件下拉框和复选框相邻的行 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中使用类行，这样孩子们就会在col-12中的一行中，如果你有复选框的位置问题，就使用padding top到复选框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>