引导程序3导航栏中的流体调整大小输入

Question

我希望我的输入在引导栏中具有最大宽度，而不会打破单行设计和折叠时的移动切换。

col-sm-*正在处理按钮，但没有处理输入。我试图避免flex-box，如果可能的话，坚持使用预先存在的Boostrap类。

---

<nav class="navbar" role="navigation"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-2"> 
     <div class="navbar-header">      
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><em>FirstShop.com</em></a> 
     </div> 
     </div> 
     <div class="col-sm-10"> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <form action=""> 
      <div class="form-group">         
       <input type="text" class="form-control col-sm-5"> 
       <button type="submit" class="btn btn-default col-sm-1">Submit</button>         
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
    </div> 
</nav> 

Also prepared a live demo here.

Answer 1

默认情况下，输入的宽度设置为100％，所以换行是由您的提交按钮引起的。解决这个问题的一种方法是使用input group，这将允许您将按钮元素与输入内联。

替换为以下标记的形式：

HTML：

 <form class="navform"> 
     <div class="input-group">    
      <input type="text" class="form-control" placeholder="Search"> 
      <span class="input-group-btn"> 
      <button class="btn btn-info" type="button"><span class="glyphicon glyphicon-search"></span> Submit</button> 
      </span> 
     </div> 
     </form> 

我还添加了navform类给予的形式相同的高度默认的导航栏和添加的留白，使输入对齐到导航栏的中间。

CSS：

.navform { 
    height: 50px; 
    padding-top: 8px; 
} 

Answer 2

你可以用你的输入特定尺寸的div：

Bootply：http://www.bootply.com/UmwelBa4tU

HTML：

<form action="" class=""> 
    <div class="row">   
     <div class="col-sm-5"> 
     <input type="text" class="form-control ">    
     </div>  

     <button type="submit" class="btn btn-default col-sm-1">Submit</button>         
    </div> 
    </form>