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

Question

我们如何使用 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>
  

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

像这样

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

  搜索

Answer 1

将inline类添加到名字，姓氏control-groupdiv：

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

工作小提琴http://jsfiddle.net/GgSRN/

Answer 2

尝试这个

    <form class="form-group form-inline">
      <label class="control-label" for="first">First Name</label>
      <input type="text" id="first" placeholder="firstname">
      <label class="control-label" for="lastname">Last Name</label>
      <input type="text" id="lastname" placeholder="Last Name">

      <div>
        <button type="submit" class="btn">Search</button>
      </div>
    </form>

检查引导程序内联表单 ，按照您所说的进行操作会很好。

Answer 3

在单独的文件中使用 CSS 来设置 html 样式。我会亲自将它们包装在<div class="row">using Bootstrap 中，并为您要创建的每个“行”使用其中一个。