html - Bootstrap 表单组不是内联的

Question

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

这是一个代码片段:

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