私の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

ブートストラップform-controlクラスは、それ自体で余裕を持っていません。

我々はmargin-bottom（私たちは通常、他のマージンを必要としない）をしたい場合は、我々はform-horizontal内form-groupを配置する必要があります。

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

Horizontal form