使用Twitter Bootstrap将表单字段水平排列

Question

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

我尝试了下面的HTML代码。但它会像下面一样一个接一个地显示。

• First Name - Text Box

• Last Name - Text Box

  Search

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

我希望名字应该水平排列在第一行，下一行是搜索按钮。

像这样

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

  搜索

- Billa

Answer 1

将inline类添加到名字和姓氏的control-group div中：

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

示例代码 http://jsfiddle.net/GgSRN/

- Dmonix

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>

请查看Bootstrap的内联表单，如你所说，这将是一个很好的选择。

- muneebShabbir

---

我已经更新了我的答案...我认为它会按照你所说的工作。 - muneebShabbir

我已经更新了链接，他们将主页移动到不同的域名下，因为使用了新版本的Bootstrap。 - muneebShabbir

Answer 3

使用CSS在单独的文件中为您的HTML添加样式。我个人会使用Bootstrap将它们包装在一个<div class="row">中，并为每个要创建的“行”使用其中之一。

- Alex Lynham