Bootstrap形式的水平对齐错误

Question

我的文本框根本无法与表单正确对齐。 我在ASP.NET MVC 4中使用Bootstrap。如您所见，我使用的是水平窗体div，但是不确定我的元素为什么全部出现在外。 如何获得与标签对齐的元素？

    <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>

Answer 1

首先，我将form-control类添加到您的文本框和文本区域，即

@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"})

有关表单控制的更多信息，请参见此处：

http://getbootstrap.com/css/

其次，您需要像这样在列div中添加标签：

<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>

这是一个简单的例子：

http://www.bootply.com/128038