垂直形式的同一行上的两个字段，带有引导程序

Question

我希望字段“Name”和“Last Name”位于同一行。

我在stackoverflow中找到了一些解决方案，例如this one，但问题是我希望位于字段上方的标签也是并排的。

这怎么可能？

这是表单代码：

<form>
  <div class="form-group">
    <label for="inputName">Name:</label>
    <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
  </div>
  <div class="form-group">
    <label for="inputLastName">Last Name:</label>
    <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
  </div>
  <div class="form-group">
    <label for="inputTitle">Title:</label>
    <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
  </div>
  <div class="form-group">
    <label for="inputEmail">Email:</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="leo@saasmetrics.co">
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Notifications:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option>None</option>
      <option>Daily</option>
      <option>Weekly</option>
      <option selected>Monthly</option>
    </select>
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Status:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option selected>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Profile:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option selected>Administrator</option>
      <option>User</option>
    </select>
  </div>
</form>

Answer 1

这样的事情应该让你开始。

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label for="inputName">Name:</label>
      <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group">
      <label for="inputLastName">Last Name:</label>
      <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
    </div>
  </div>
</div>

Answer 2

是的，最佳答案是正确的，但这是另一种解决方案。您可以使用这样的内联引导表单：

<div class="form-inline">
    <div class="form-group" style="width: 50%">
        <label for="input1">Name</label>
        <input type="text" class="form-control" id="input1" placeholder="David">
    </div>
    <div class="form-group" style="width: 49%">
        <label for="input2">Last Name</label>
        <input type="text" class="form-control" id="input2" placeholder="Tanner">
    </div>
</div>

阅读bootstrap document