无法左对齐DropDownListFor

时间:2016-09-22 20:02:12

标签: css twitter-bootstrap asp.net-mvc-5

我有一个带有BootStrap的Html.DropDownListFor,它不像我的表单中的Html.TextBoxFor那样左对齐。我已经尝试过“左拉”和“左手”但没有运气。当我使用开发人员工具查看页面时,看起来并不是我能看到的导致问题的任何内容。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Submitter Information</h3>
    </div>
    <div class="panel-body">

        <div class="row form-group">
            @Html.LabelFor(m => m.EmployeeId, new { @class = "col-md-4 control-label text-right" })
            @Html.TextBoxFor(m => m.EmployeeId, new { @class = "col-md-8 form-control", @readonly = "true" })
        </div>

        <div class="row form-group">
            @Html.LabelFor(m => m.EmployeeName, new { @class = "col-md-4 control-label text-right" })
            @Html.TextBoxFor(m => m.EmployeeName, new { @class = "col-md-8 form-control", autofocus = true, @placeholder = "Employee Name" })
        </div>

        <div class="row form-group">
            @Html.LabelFor(m => m.EmployeeEmail, new { @class = "col-md-4 control-label text-right" })
            @Html.TextBoxFor(m => m.EmployeeEmail, new { @class = "col-md-8 form-control", @placeholder = "Email Address" })
        </div>

        <div class="row form-group">
            @Html.LabelFor(m => m.SelectedEmployeeCo, new { @class = "col-md-4 control-label text-right" })
            <div class="col-md-8 pull-left">
                @Html.DropDownListFor(x => x.SelectedEmployeeCo, 
                                        new SelectList(Model.Companies, "Co", "Name"), 
                                        "-- Select Company --", 
                                        new {@class = "form-control text-left" })
            </div>
        </div>

    </div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:0)

我改变了一些事情,这本来应该是对我的,因为我对其他TextBoxFor做了同样的事情。我最终直接在DropDownListFor上将列类移动到CSS中,而不是在单独的div中。我本以为它会呈现相同但却没有。所以,这里要说的是保持一致。使用列CSS将每个控件包装在div中,或者直接在控件上应用CSS。

这是我修复它的方式。

<div class="row form-group">
    @Html.LabelFor(m => m.SelectedEmployeeCo, new { @class = "col-md-4 control-label text-right" })
    @Html.DropDownListFor(x => x.SelectedEmployeeCo,
                            new SelectList(Model.Companies, "Co", "Name"),
                            "-- Select Company --",
                            new { @class = "col-md-8 form-control pull-left" })
</div>