调整下拉框与textarea的对齐问题（附ASP.NET MVC代码）

It looks like the alignment issue stems from not properly structuring your Bootstrap form elements—specifically, the dropdown isn’t wrapped in a column container that matches the label’s layout, which throws off alignment with your textarea. Here’s how to fix it:

Step 1: Restructure the Dropdown’s Form Group #

Bootstrap horizontal forms require both labels and inputs to be wrapped in column classes to align correctly. Your label uses col-md-6, so the dropdown needs to go inside a matching col-md-6 div to occupy the remaining space in the row:

<!-- YEAR -->
<div class="col-md-6 col-md-push-1">
    <div class="form-group">
        @Html.LabelFor(model => model.Year, htmlAttributes: new { @class = "control-label col-md-6" })
        <div class="col-md-6"> <!-- Add this wrapper div -->
            @Html.DropDownListFor(model => model.Year, ViewBag.years as IEnumerable<SelectListItem>, "-- Select Year --", new { @class = "form-control", @id = "cbYears" })
            @Html.ValidationMessageFor(model => model.Year, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Step 2: Match the Textarea’s Structure #

Make sure your textarea follows the exact same column structure to keep alignment consistent. For example:

<!-- Example Textarea -->
<div class="col-md-6 col-md-push-1">
    <div class="form-group">
        @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-6" })
        <div class="col-md-6">
            @Html.TextAreaFor(model => model.Notes, new { @class = "form-control", rows = 4 })
            @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Quick Additional Checks #

• Ensure your parent <form> has the form-horizontal class applied (critical for Bootstrap 3 horizontal alignment):

  <form class="form-horizontal" method="post" action="/your-action">
      <!-- Your form groups here -->
  </form>
  

• Double-check that no custom CSS is overriding Bootstrap’s default padding/margins for form-control or column classes—this is a common hidden cause of alignment breaks.

By wrapping the dropdown in a column div that mirrors the label’s width, both elements will follow Bootstrap’s grid system uniformly, matching the textarea’s alignment perfectly.

内容的提问来源于stack exchange，提问作者Hudas Iskaryote