Bootstrap表格水平对齐错误 [英] Bootstrap Form Horizontal Alignment Errors

问题描述

我的文本框与我的表单完全不对齐.我在ASP.NET MVC 4中使用Bootstrap.如您所见，我使用的是水平窗体div，但不确定为什么我的元素全部显示为异常.如何获得与标签对齐的元素?

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>

推荐答案

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

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/

第二，您需要像这样在列div中添加标签:

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

这篇关于Bootstrap表格水平对齐错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！