css - 输入字段旁边的位置警报，多个输入字段之间有相同的空格

Question

在我的表单上，我有两个字段，如下所示:

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

<div class="form-group">
    @Html.Label("State", new { @class = "control-label col-md-2" })
    <div class="col-md-4">
        <div class="tt-container">
            @Html.Editor("StateName", new { htmlAttributes = new { @id = "StateName", @class = "form-control" } })
        </div>
        @Html.ValidationMessageFor(model => model.StateId, "", new {@class = "text-danger"})
    </div>
    <div class="alert alert-dismissible alert-warning col-md-6">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Warning!</h4>
        <p>Please select the state the appears as you continue to type in the state where you are from.</p>
    </div>
</div>

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

在 View 中它看起来像这样:

如何使州输入字段和电子邮件输入字段之间的间距相同，就像城市和州输入字段之间的间距一样？

Answer 1

Bootstrap grid examples

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.alert{
min-width:250px;
}

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
  <div class="col-md-3 col-sm-4 col-xs-6"><form class="form-inline">
  <div class="form-group">
      <label for="email">Email address:</label>
       <input type="email" class="form-control" id="email">
    </div>
     <div class="form-group">
       <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd">
     </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
   </div>
    <div class="col-md-3 col-sm-4 col-xs-6 container">
       <div  class="alert alert-info">alert</div>
    </div>
</div>