Пытается получить глификон, касаясь панели ввода

Question

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

Проблема в том, что между кнопкой и полем ввода существует большой промежуток, и это стеки при уменьшении экрана.

вот код:

<form class="navbar-left" role="search" method=post action={{ url_for('search') }}> 

    <div class="form-group form-inline"> 

    <div class="input-group input-lg"> 

     {{ render_field(form.search, placeholder='Buscar') }} 

    </div> 
       <button type="submit" class="btn btn-default" > 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
    </div> 

</form> 

Answer 1

Вы говорите о чем-то вроде этого?

button.btn-search { 
 
    border: none; 
 
    padding-top: 5px; 
 
    position: fixed; 
 
    background: none; 
 
} 
 
button.btn-search:hover { 
 
    border: none; 
 
    background: none; 
 
    color: blue; 
 
} 
 
input { 
 
    padding-left: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form class="navbar-left" role="search"> 
 
    <div class="form-group form-inline"> 
 
    <div class="input-group input-lg"> 
 
     <input type="text" name="name" placeholder="Enter your name" /> 
 
     <button type="submit" class="btn btn-default btn-search"> <span class="glyphicon glyphicon-search"></span> 
 

 
     </button> 
 

 
    </div> 
 
    </div> 
 
</form>