使用引导程序以垂直形式在同一行上的两个字段答案

【问题标题】：Two fields on the same line in a vertical form with bootstrap使用引导程序以垂直形式在同一行上的两个字段
【发布时间】：2015-04-25 23:33:35
【问题描述】：

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

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

这怎么可能？

这是表单代码：

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

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案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>

【讨论】：

我不需要“行”类...！
@FábioZangirolami 它可能看起来好像你不需要它，但你确实需要它。如果省略该行，则左右边距将被弄乱，并且您的浮动 col-sm-6 将不再包含在块级行中。
我用@media screen and (min-width: 768px) ... padding-left ... padding-right ... tks 对待它

【解决方案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

【讨论】：