为什么我的ASP Core MVC Razor表单显示没有边距的输入框？

Question

我查看了样板文件引导程序，如下所示：

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

我的观点并未在表单控件上显示边距。我将以下内容放在表单控件CSS的末尾：

    margin: 5px;

我应该做其他事吗？我的表单代码：

@using (Html.BeginForm("Update", "Restaurant", FormMethod.Post, new { @class = "" }))
{
    <div class="row">
        @*@Html.LabelFor(model => model.Restaurant.Phone, new { @class = "sr-only", @for = "PhoneID" })
            @Html.TextBoxFor(model => model.Restaurant.Phone, new { @class = "form-control", @placeholder = "", @id = "PhoneID" })*@
        <div class="form-group">
            @Html.LabelFor(model => model.Restaurant.Phone, new { @class = "sr-only control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Restaurant.Phone, new { @class = "form-control", @placeholder = @Html.DisplayNameFor(model => model.Restaurant.Phone) })
                @Html.ValidationMessageFor(model => model.Restaurant.Phone, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Restaurant.Address, new { @class = "sr-only" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Restaurant.Address, new { @class = "form-control", @placeholder = @Html.DisplayNameFor(model => model.Restaurant.Address) })
                @Html.ValidationMessageFor(model => model.Restaurant.Address)
            </div>
        </div>
    </div>
}

Answer 1

Bootstrap form-control类本身没有边距。

如果我们想要margin-bottom （我们通常不需要其他边距），我们需要将form-group放在form-horizontal内。

@using (Html.BeginForm("Update", "Restaurant", 
      FormMethod.Post, new { @class = "form-horizontal" }))

Horizontal form