Bootstrap 表单水平对齐错误答案

【问题标题】：Bootstrap Form Horizontal Alignment ErrorsBootstrap 表单水平对齐错误
【发布时间】：2014-05-19 15:42:24
【问题描述】：

我的文本框根本没有与我的表单正确对齐。我在 ASP.NET MVC 4 中使用 Bootstrap。如您所见，我正在使用 form-horizontal 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>

【问题讨论】：

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

【解决方案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

【讨论】：