无法正确显示标头中的Bootstrap搜索栏

Question

我在标题右侧显示搜索栏时遇到问题。

我正在做的是以下内容：

<div class="row">
    <div class="col-lg-12">
        <div class="page-header">
            <div class='btn-toolbar pull-right'>
                <div class='btn-group'>
                   <button type="submit" class="btn btn-default">Submit</button>
                    <input type="text" class="form-control" placeholder="Search">

                </div>
            </div>
            <h2>Perfiles</h2>
        </div>
    </div>
</div>

这是一个解释我问题的小提琴：

https://jsfiddle.net/DTcHh/16632/

编辑：

好的，这是一张有问题的照片：

我想要的是sarch按钮和输入都在同一行。

Answer 1

您的搜索输入字段包含width: 100%和display:block。修复应解决问题。尝试在CSS中添加以下内容：

.form-control {
  width: auto;
  display:inline-block;
}

Fiddle

Answer 2

搞定了！

诀窍在于使用class="form-inline"

以下是使其有效的代码：

<div class="row">
<div class="col-lg-12">
    <div class="page-header">
        <div class='btn-toolbar pull-right'>
            <div class='btn-group'>
               <button type="submit" class="btn btn-default">Submit</button>
                <input type="text" class="form-control" placeholder="Search">

            </div>
        </div>
        <h2>Perfiles</h2>
    </div>
</div>

以下是我实际看到的图片：