带引导的垂直形式在同一行上的两个字段

Question

我希望字段“名称”和“姓氏”在同一行上。

我已经找到了一些解决方案，如这一个在这里计算器，但问题是，我想上方的字段标签是由侧方太。

那怎么可能？

这是表单代码：

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