html - 同一行上的两个字段以带有 Bootstrap 的垂直形式

Question

我希望字段“姓名”和“姓氏”位于同一行。

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

这怎么可能？

表单代码如下:

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