Вставить компонент Bootstrap в навигационную панель

Question

Я пытаюсь вставить этот bootstrap search component в свой навигатор.

Вот HTML поискового сниппета:

 <form class="navbar-form" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       <span class="input-group-btn"> 
        <button type="reset" class="btn btn-default"> 
         <span class="glyphicon glyphicon-remove"> 
          <span class="sr-only">Close</span> 
         </span> 
        </button> 
        <button type="submit" class="btn btn-default"> 
         <span class="glyphicon glyphicon-search"> 
          <span class="sr-only">Search</span> 
         </span> 
        </button> 
       </span> 
      </div> 
     </form> 

Вот codepen с моим кодом и вот full screen view моей навигационной панели.

Так, в основном, при нажатии на значок поиска мне нужен весь навигатор, чтобы стать полем поиска (как в ссылке со словом поиска). Но когда я вставляю фрагмент поиска в свой навигатор и пытаюсь щелкнуть значок поиска, не весь навигатор становится полем поиска, а всего лишь половиной.

Я думаю, что я делаю что-то не так с классами collapse navbar-collapse, я попытался добавить их к различным элементам выпадающего списка на моем навигаторе, чтобы обернуть форму поиска в этих классах, но мне не удалось заставить ее работать правильно. В фрагменте есть также некоторый код jQuery, который переключает класс .active и добавляет некоторые прослушиватели событий click, но я предполагаю, что он не нуждается в каких-либо изменениях, я считаю, что моя проблема больше связана с css и соответствующими классами в элементах html.

Не могли бы вы помочь мне правильно вставить поисковый фрагмент?

Answer 1

Вопрос - это версия Bootstrap. Bootsnipp использует v 3.1, но ваш Codepen использует новый 3.3.5. В новой версии CSS для input-btn-group изменился на width:auto.

Если вы хотите использовать 3.3.5, добавьте переопределение Комплекса ширину до 1% ..

@media (min-width: 768px) { 
    .navbar-form .input-group .input-group-btn { 
    width: 1%; 
    } 
} 

http://codeply.com/go/mtMcAYqmOz