在多个输入字段之间具有相同空格的输入字段旁边定位警报

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>

在视图上看起来如此：

如何设置它以便状态输入字段和电子邮件输入字段之间有相同的空间，就像城市和州输入字段之间的空间量一样？

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>