动态保持下拉列表与输入框大小相同

时间:2016-06-23 14:47:11

标签: html css asp.net twitter-bootstrap html.dropdownlistfor

我正在使用 ASP.NET,Bootstrap 3 网站,并且在更改dropdownlist的大小时遇到​​问题。

我可以在CSS中手动更改它以匹配其他input框的大小,但我不想每次需要更改它时手动编辑它。

有没有办法始终保持dropdownlist和其他input框之间的宽度相同?

这是它正在做的事情: iPhone 6 vs iPhone 5: Problem。问题是下拉列表不会在div中调整大小。

以下是我的代码示例:

<section class="features">
@using (Html.BeginForm("Create", "UsersAdmin", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account</h4>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <!--ALL THESE INPUT BOXES ADJUST AUTOMATICALLY-->
            <div class="form-group">
                @Html.LabelFor(m => m.Address, new { @class = "col-md-5 control-label" })
                <div class="col-md-7">
                    @Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Address, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.City, new { @class = "col-md-5 control-label" })
                <div class="col-md-7">
                    @Html.TextBoxFor(m => m.City, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
                </div>
            </div>

            <!--HERE IS THE DROPDOWLIST THAT NEEDS TO BE ADJUSTED DYNAMICALLY-->
            <div class="form-group">
                @Html.LabelFor(m => m.State, new { @class = "col-md-5 control-label" })
                <div class="col-md-7 dropdownlist">
                    @Html.DropDownListFor(m => m.State, Steel_Tech.STATE.States, "--Select a State--", new { @class = "dropdownlist" })
                    @Html.ValidationMessageFor(m => m.State, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.Zip, new { @class = "col-md-5 control-label" })
                <div class="col-md-7">
                    @Html.TextBoxFor(m => m.Zip, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Zip, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" class="btn btn-default" value="Create" />
    </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

0 个答案:

没有答案