Ширина управления текстовым вводом

Question

Я пытаюсь создать одну строку с поисковыми вводами (текстовым вводом и «прикрепленной» кнопкой) слева и кнопкой справа (бит над сеткой):

Вот код:

<form class="row form-inline"> 
    <div class="form-group col-xs-6"> 
     <div class="input-group"> 
      <input name="search" type="text" class="form-control input-sm"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default btn-sm" type="submit"> 
        <span class="glyphicon glyphicon-search"></span> Search 
       </button> 
      </span> 
     </div> 
    </div> 

    <div class="form-group col-xs-6"> 
     <a class="btn btn-default btn-sm pull-right" href="#"> 
      <span class="glyphicon glyphicon-user"></span> Create 
     </a> 
    </div> 
</form> 

проблема заключается в том, что ширина ввода текста слишком мал, на «LG» и «мкр» размеры браузера, а только увеличивает к чему-то, что выглядит ОК, когда браузер имеет меньшие размеры. Каков наилучший способ увеличить ширину поискового ввода при больших размерах браузера?

Answer 1

Почему вы не устанавливаете ширину на входе с помощью классов начальной загрузки? например

<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12"> 

Answer 2

Попробуйте это также

<form class="row form-inline"> 
    <div class="form-group col-md-8"> 
     <div class="input-group"> 
      <input name="search" type="text" class="form-control col-md-6"> 
      <span class="input-group-btn col-md-2"> 
       <button class="btn btn-default" type="submit"> 
        <span class="glyphicon glyphicon-search"></span> Search 
       </button> 
      </span> 
     </div> 
    </div> 

    <div class="form-group col-md-4"> 
     <a class="btn btn-default pull-right" href="#"> 
      <span class="glyphicon glyphicon-user"></span> Create 
     </a> 
    </div> 
</form> 

Answer 3

Как вы можете видеть в Bootstrap DOC форм-рядный требуют установки ширины для ввода COMPONENTES:

http://getbootstrap.com/css/#forms-inline

Чтобы решить эту проблему, я имеют специальные классы для этого:

.input-width-X {width: X} 
.input-width-Y {width: Y} 
... 

и используйте медиа-запросы для этих классов, чтобы применять их только тогда, когда вы не находитесь в режиме XS, потому что Bootstrap установил на него 100% ширину.

К сожалению о моем английском :)