Bootstrap Form Horizontal Alignment Errors

问题

My textboxes aren't aligning with my form properly at all. I'm using Bootstrap within ASP.NET MVC 4. As you can see I'm using the form-horizontal div but im not sure why my elements are appearing all out of line. How do I get the elements to align with the labels?

    <div class="form-horizontal">
    @Html.ValidationSummary(true)

    <div class="form-group">
            @Html.Label("Please enter the Inventory No", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off"})
                @Html.ValidationMessageFor(model => model.Log.InventoryNo)
                <span class="help-block">Inventory No is physically located on the Inventory sticker device on the side of a device.</span>
            </div>
        </div>

    <div class="form-group">
        @Html.Label("Please add any keywords", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250"})
                    @Html.ValidationMessageFor(model => model.Tags)
                    <span class="help-block">Required: Enter the keywords of your fault description. For emample, Printer, Jammed, Paper and etc. </span>
                </div>
            </div>

    <div class="form-group">
            @Html.Label("Please enter a description of the fault", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
                @Html.ValidationMessageFor(model => model.IncidentDescription)
            </div>
        </div>

回答1:

First I would add the form-control class to your textboxes and textarea i.e

@Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off", @class="form-control"})
....
@Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250", @class="form-control"})

See here for more info on form-control:

http://getbootstrap.com/css/

Secondly you need to add your labels within your column divs like this:

<div class="form-group">
            <div class="col-md-10">
                @Html.Label("Please enter a description of the fault", new { @class = "control-label col-md-2" })
                @Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
                @Html.ValidationMessageFor(model => model.IncidentDescription)
            </div>
        </div>

Here is a simple example here:

http://www.bootply.com/128038

来源：https://stackoverflow.com/questions/22911713/bootstrap-form-horizontal-alignment-errors