防止輸入組

Question

我有Twitter-引導導航欄，其包括搜索表單

時遇到的問題是，搜索欄跨越嘮叨的整個寬度當我使用的輸入組

這裏有一個小提琴

http://jsfiddle.net/ce3SS/

，這裏是我的代碼...酒吧

<div class="navbar navbar-inverse" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-nav"> 
     <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">Brand name</a> 
    </div> 
    <div class="navbar-collapse navbar-right collapse" id="header-nav"> 
     <form class="navbar-form navbar-right form-inline" role="form"> 
     <div class="form-group"> 
      <label class="sr-only" for="inputSearch">Search...</label> 
      <div class="input-group"> 
      <input type="text" class="form-control" id="inputSearch" name="inputSearch" placeholder="Search..."> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="button">Search</button> 
      </span> 
      </div> 
     </div>     
     </form> 
    </div> 
    </div> 
</div> 

任何想法如何讓搜索成爲一個更合理的大小，並且無需破解CSS即可。

感謝

Answer 1

你可以試試這個...

<div class="navbar-collapse collapse" id="header-nav"> 
     <form class="navbar-form"> 
      <div class="form-group" style="display:inline;"> 
      <div class="input-group"> 
       <input type="text" class="form-control"> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
      </div> 
      </div> 
     </form> 
</div> 

演示：http://bootply.com/107803

Answer 2

應該是一個簡單的修補程序。你只是想使用CSS將寬度應用於輸入字段。然後，你可以移動它。嘗試在標記本身上添加樣式。

<div class="input-group" style="width: 20%"> 

（我做了20％，但你可以添加任何東西）。

我總是使用％與bootstrap，以便我的更改不會對它的響應性產生負面影響。

編輯：修正了我的造型

Answer 3

可以播放添加col-xs-4 col-sm-4 col-md-4 col-lg-4類的div.input-group保留響應功能，其標籤。