无法在标头中正确显示引导程序搜索栏

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> 

，这里是什么，我其实是在寻找图片：