Bootstrap: 将复选框与下拉菜单匹配

Question

我想在我的 ASP.Net MVC 应用程序中匹配一个带有下拉菜单的复选框（复选框将 enable/disable 下拉菜单）。我试图更改显示如何将复选框与输入框匹配的 code on the official bootstrap site 以满足我自己的需要。但这并没有真正解决。

我的 html 看起来像这样：

<div class="row">
                    <div class="col-md-3">
                        @Html.LabelForConfig(model => model.CompanyPkid)
                    </div>
                    <div class="col-lg-9">
                        <div class="input-group">
                            <span class="input-group-addon">
                                @Html.CheckBoxFor(model => model.IsSCompanyForPush)
                            </span>
                            @Html.DropDownListFor(model => model.CompanyPkid, Model.SelectOptions.CompanyPkidList)
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div>

结果如下：

我怎样才能解决这个问题，让它看起来更干净？

Answer 1

要应用 bootstrap 输入样式，您需要为下拉菜单提供 form-control class:

@Html.DropDownListFor(model => model.CompanyPkid, Model.SelectOptions.CompanyPkidList, new { @class = "form-control" })

Bootstrap: 将复选框与下拉菜单匹配

Bootstrap: match checkbox with dropdown menu

asp.net

asp.net-mvc

twitter-bootstrap

twitter-bootstrap-3