Asp.net mvc 5 文本框大小不同

我使用脚手架项目创建了控制器和视图，但当我在程序中运行视图时，我可以看到我的文本框大小不同。如何使其大小相同？ 我的看法是：

@model FCproject.Models.Purchase

@{
    ViewBag.Title = "Edit2";
}

<h2>Edit2</h2>

@using (Html.BeginForm(new { OrderDate = Model.OrderDate }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Purchase</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.PurchaseID)

        <div class="form-group">
            @Html.LabelFor(model => model.CustomerID, "Customer Cell", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CustomerID", String.Empty)
                @Html.ValidationMessageFor(model => model.CustomerID)
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.DeliveryChoice, "DeliveryChoice", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", true) Deliver my order to me</label>
                </div>
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", false) I will pick up my order</label>
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.OrderDueDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OrderDueDate)
                @Html.ValidationMessageFor(model => model.OrderDueDate)
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.OrderTime, "Order Due Time", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OrderTime)
                @Html.ValidationMessageFor(model => model.OrderTime)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.OrderAdress1, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OrderAdress1)
                @Html.ValidationMessageFor(model => model.OrderAdress1)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.OrderAdress2, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OrderAdress2)
                @Html.ValidationMessageFor(model => model.OrderAdress2)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.OrderAdress3, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OrderAdress3)
                @Html.ValidationMessageFor(model => model.OrderAdress3)
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

以下是屏幕图片的链接，您可以看到它看起来非常凌乱，因为文本框大小不同，“订单到期日”文本框太厚“CustomerCell”文本框太小，“订单到期时间”太厚太短：

---

ASP.NET MVC项目模板使用引导程序请参见 用于设置HTML的样式。CSS文件应位于Content\bootstrap.CSS。 请注意，该视图包含以下用于设置窗体样式的类

<div class="form-horizontal">
<div class="form-group">

在

如果要使用引导设置窗体控件的样式，则需要向视图中的元素添加适当的引导CSS类

下面是一些与使用引导设置各种元素样式的代码无关的示例

要设置下拉列表添加的样式

Html.DropDownList("movieGenre", (SelectList)ViewBag.movieGenre, "All", new { @class = "form-control" })

这将导致使用类表单控件生成以下HTML：

获得类似于的输出

<input class="form-control text-box single-line" id="Genre" name="Genre" type="text" value="Comedy" />

要了解表单控件的引导类，请查看引导的文档

要想知道在HtmlHelpers中新的{@class=form control}行的位置，请查看它的文档

您也可以在bootstrap的CSS之后添加您自己的CSS文件，并自行设置包括宽度在内的元素的样式，但如果您使用bootstrap，则不建议这样做

使用引导设置表单元素的样式后，它们的宽度应该相同

---

转到bootstrap的网站，点击CSS，然后点击表单以了解更多信息。

哪一个是不同大小的？包括小提琴或图片。我已经编辑了我的问题并添加了图片链接。请帮助OrderDueDate和OrderTime都使用@Html.EditorFor not TextBoxFor，因此可能分别生成type=date和type=time，因为您已经应用了检查Html所需的[DataType]属性。CustomerID是一个，而不是一个。你需要修改你的css。使用浏览器工具查看哪些样式被添加到这些元素中，以及来自哪个css文件，并与文本框的css进行比较。

@Html.LabelFor(model => model.CustomerID, "Customer Cell", new { @class = "control-label col-md-2" })

Html.DropDownList("movieGenre", (SelectList)ViewBag.movieGenre, "All", new { @class = "form-control" })

<select class="form-control" id="movieGenre" name="movieGenre">
<option value="">All</option>
<option>Comedy</option>
<option>Western</option>
</select>

@Html.EditorFor(model => model.Genre, new { htmlAttributes = new { @class = "form-control" } })

<input class="form-control text-box single-line" id="Genre" name="Genre" type="text" value="Comedy" />

@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })