html - 使用Twitter Bootstrap水平放置表单字段

我们如何使用Twitter Bootstrap水平放置表单字段

我尝试了以下HTML代码。但如下图所示

名字-文本框

姓氏-文本框

搜索

<form class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="first">First Name</label>
      <div class="controls">
        <input type="text" id="first" placeholder="firstname">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="lastname">Last Name</label>
      <div class="controls">
        <input type="text" id="lastname" placeholder="Last Name">
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <button type="submit" class="btn">Search</button>
      </div>
    </div>
  </form>

我希望“名字”和“姓氏”应水平放置在第一行和下一行“搜索按钮”中。

像这样

名字-文本框姓氏-文本框

搜索

最佳答案

将inline类添加到名字，姓氏control-group div中:

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

工作 fiddle http://jsfiddle.net/GgSRN/