创建/表格间距

Question

我创建了一个标准的创建页面。我已将 @style = "height: 25" 添加到标签和编辑器行。我的目标是改变文本框的高度，这很好，但是在我这样做之后标签没有在文本框的中间对齐？

所以我的第一个问题是，如何将标签与文本框居中对齐？

其次，我想在整个页面上没有所有文本框之间的所有间距。有没有一种简单的方法可以压缩所有的间距？

谢谢， 乙

                            @model Intranet.Models.Order

                            @{
                                ViewBag.Title = "CreateOrder";
                                Layout = "~/Views/Shared/_Layout.cshtml";
                            }

                            <h2>Create Order</h2>

                            @using (Html.BeginForm())
                            {
                                @Html.AntiForgeryToken()

                                <div class="form-horizontal">
                                    <hr />
                                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.Borrower, htmlAttributes: new { @class = "control-label col-md-2", @style = "height: 25px" })
                                        <div class="col-md-10">
                                            @Html.EditorFor(model => model.Borrower, new { htmlAttributes = new { @class = "form-control", @style = "height: 25px" } })
                                            @Html.ValidationMessageFor(model => model.Borrower, "", new { @class = "text-danger" })
                                        </div>
                                    </div>

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

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

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

                            <div>
                                @Html.ActionLink("Back to List", "Index")
                            </div>

Answer 1

您需要为其编写自定义 CSS。如果您有项目的默认文件夹结构，则可以在 Content/Site.css 文件中编写自定义 CSS。 对于您当前的设计，默认引导 css 应用为：

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
  }
}

要全局对齐标签并设置文本框的高度，请将以下代码添加到Site.css文件：

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 3px;
        margin-bottom: 0;
        text-align: right;
    }

    .form-horizontal .form-control {
        height: 25px;
    }
}

查看标签的内边距随着您当前的文本框高度而减少。您不需要为标签控件设置高度，没有它也可以正常工作。

请注意，如果Site.css 页面不存在，则必须在您的_Layout.cshtml 页面中包含Site.css 文件。