Question

我使用脚手架项目创建了我的控制器和视图，但是当我在程序中运行我的视图时，我可以看到我的文本框大小不同。我怎样才能得到相同的大小？这是我的观点：

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

这是指向屏幕图片的链接，因为您可以看到它看起来非常混乱，因为文本框大小不同，订单到期日期＆＃39;文本框太厚了＆＃39; CustomerCell＆＃39;文本框太小，订单到期时间＆＃39;太厚又短：

Edit screen link

Answer 1

ASP.NET MVC项目模板使用bootstrap see（http://getbootstrap.com/）用于样式化HTML。 CSS文件应位于“Content \ bootstrap.css”。请注意，该视图包含以下类来设置表单样式

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

使用

设置提交按钮的样式

<input type="submit" value="Save" class="btn btn-default" />

并且一些HtmlHelper方法（例如LabelFor）包含添加到HTML的其他样式的代码。例如

new { @class = "control-label col-md-2" }

在

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

如果你想使用bootstrap来设置表单控件的样式，那么你需要在视图中的元素中添加适当的bootstrap CSS类。

以下是使用bootstrap设置各种元素样式的一些示例（与您的代码无关）。

设置下拉列表添加样式

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

这导致以下带有form-control类的HTML：

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

你也可以添加text-danger bootstrap CSS类来使验证警告文本变为红色（或者它定义在CSS文件中的颜色），如下所示：

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

要了解表单控件的bootstrap类，请查看bootstrap的文档。

要弄清楚HtmlHelpers中new { @class = "form-control" }行的放置位置，请查看其文档（https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper_methods(v=vs.118).aspx）

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

使用bootstrap设置表单元素的样式后，它们的宽度应该相同（访问bootstrap的网站，点击CSS然后点击表格获取更多信息）。

文本框的大小不同

1 个答案: