Bootstrap NavBar не-разборное поле ввода

Question

У меня есть нав бар с полем ввода и пара связывает , но я хочу только ссылки на быть свернуты. Я пытаюсь получить эту работу в течение нескольких часов без успеха.

Это не остается на одном ряду

То, что я хочу что-то вроде этого

Desktop

| [Brand Name] [Input field___________________________(Search)]  [Button] [Button] | 

Mobile

| [Brand Name] [Input field  (Search)] [#] | 
|---------------------------------------------| 
| Button          | 
| Button          | 

http://www.bootply.com/G1JJxeMQA0#

другой atempt http://www.bootply.com/n3raobttyd

Answer 1

Взгляните на это: https://jsfiddle.net/9L3b08zf/

Если изменить размер сетки результата, вы увидите, как ссылка будет прыгать формы сторону вниз.

Я использовал самозагрузки сетки для достижения этой цели.

<div class="row"> 
<div class="col-md-6 search"> 
    <form class="navbar-form" role="search" method="get" id="search-form" name="search-form"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="e.g.: www.google.com" id="query" name="query" value=""> 
      <div class="input-group-btn"> 
       <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"> Locate</span></button> 
      </div> 
     </div> 

     </form> 
</div> 
<div class="col-md-6 buttons"> 
    <div class="collapse navbar-collapse navbar-ex1-collapse "> 
    <div class="row"> 
     <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">Login</a></div> 
     <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">Register</a></div> 
    </div> 
    </div> 
</div>