Html 使用Twitter引导水平放置表单字段

如何使用Twitter引导水平放置表单字段

我尝试了下面的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>
  

  
  名字
  姓
  搜寻
  

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

像这样

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

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

---

在单独的文件中使用CSS来设置html的样式。我个人会使用Bootstrap将它们包装在一个

中，并为您要创建的每个“行”使用其中一个。

将

内联
类添加到名、姓
控制组
div:

<div class="control-group inline">

工作小提琴
试试这个

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


名字
姓
搜寻

检查
照你说的去就好了。
我已经更新了我的答案。。。我认为这将为你工作，因为你说我已经更新了链接，他们在那里移动到不同的领域由于新版本的引导