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-group div：

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

检查bootstrap inline Form 你说的话会很好。

Answer 3

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

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

3 个答案: