html - 需要修复 Bootstrap 表单

Question

我正在尝试使用 bootstrap 创建一个表单，我试图在同一行的两列中填充两个字段，在另一行中填充第三个字段，宽度与上行相同。但是第三个字段如何不像上面的字段那样占据整个行宽。

 <div class="container">
 <h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
 <br>
 <form>
 <div class="row">
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
    <div class="row">
      <div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
        <label>Name</label>
      </div>
      <div class="col-lg-11 col-md-10 col-sm-9 col-xs-9">
        <input type="text">
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
        <label>Phone</label>
      </div>
      <div class="col-lg-10 col-md-9 col-sm-9 col-xs-9">
        <input type="text">
      </div>
    </div>
  </div>
 </div>
 <br>
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row">
       <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">
         <label>Email</label>
       </div>
       <div class="col-lg-11 col-md-10 col-sm-9 col-xs-8">
         <input type="email">
       </div>
     </div>
   </div>
 </div>

这是我的 jsfiddle我试图在同一行显示姓名和电话字段，其中电子邮件占据姓名和电话字段下方的整行。但电子邮件字段并没有占用整行。

Answer 1

我认为您正在尝试这样做。

@media (min-width: 767px) {
  #soForm .soForm {
    margin: 10px auto;
  }
  #soForm .control-label {
    margin-top: 10px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>

  </br>
  <form id="soForm" name="soForm">
    <div class="form-group">
      <label for="name" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-4 soForm">
        <input type="text" class="form-control" id="name" />
      </div>
    </div>
    <div class="form-group">
      <label for="phone" class="col-sm-2 control-label">Phone</label>
      <div class="col-sm-4 soForm">
        <input type="text" class="form-control" id="phone" />
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="email" />
      </div>
    </div>
  </form>
</div>