Bootstrap表单组不是内联的

Question

我的问题是“类别”按钮和带有“GO！”的输入栏。按钮不在彼此的同一行。

以下是代码段：

<form class="form" role="form"> 
  <div class="form-group">
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        Category <span class="caret"></span>
        </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>


  <div class="form-group">
    <div class="row">
      <div class="col-lg-3">
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
  </div>
</form>

这就是目前的情况：

正如你所看到的，它们都是分开的。

Answer 1

我应该写的东西

<form class="form-inline" role="form">
    ....
</form>

如果您在css文件中编写表单类（.form）。好的。因为我认为Bootstrap.css中没有任何类名为Form（.form）。这是

第一。

<form></form>

第二。

<form class = "form-inline"></form>

第三

<form class = "form-horizontal"></form>