css - 无法左对齐 DropDownListFor

Question

我有一个带有 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>

Answer 1

我改变了一些东西，这对我来说应该是显而易见的，因为我对另一个 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>