CSS Pessoal não consigo resolver esse mini probleminha no layout. (BOOTSTRAP3)

[Adriano_web]

Então, estava desenvolvendo um menu com Bootstrap 3 e decidi colocar uma barra de pesquisa porém o botão do lado direito não se ajusta com o tamanho do input, alguém poderia ver o que há de anormal no código?

 

<ul class="nav navbar-nav navbar-right">
  <div class="navbar-form">
    <div class="input-group">
      <input type="search" class="form-control" placeholder="Search...">
      <div class="input-group-btn">
        <button type="search" class="btn btn-default">
          <span class="glyphicon glyphicon-search"></span>
        </button>	
      </div>	
    </div>
  </div>
</ul>

Este é um pedaço do menu que inseri o "navbar-form".

 

Este é o detalhe da falha, altura do botão menor que a da caixa de entrada.

[Leonardo0308]

Bom dia @Adriano_web

 

Tenta assim.

<div class="input-group-btn input-group-addon">
    <button type="search" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span>
</button>

 

 

 

 

 

[Adriano_web]

2 horas atrás, Leonardo0308 disse:

Bom dia @Adriano_web

 

Tenta assim.

<div class="input-group-btn input-group-addon">
    <button type="search" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span>
</button>

 

 

 

 

 

 

Desta forma o interior do botão fica com espaçamento e uma margem é adicionada.

[Leonardo0308]

Tenta esse outro.

 

<ul class="nav navbar-nav navbar-right">
  <div class="navbar-form">
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search...">
      </div>
      <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    </form>
  </div>
</ul>

 

[Adriano_web]

17 horas atrás, Leonardo0308 disse:

Tenta esse outro.

 

<ul class="nav navbar-nav navbar-right">
  <div class="navbar-form">
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search...">
      </div>
      <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    </form>
  </div>
</ul>

 

 

Agora se separou do input e ainda ficou menor a altura. É estranho esse problema.

[Leonardo0308]

Então tenta acerta a atura com o CSS direto, pode ser mais fácil.

[Adriano_web]

@Leonardo0308  Ok, vai ser a forma mesmo, e o estranho é que no exemplo que estou vendo na W3Schools está batendo perfeitamente com meu código, erro simples mas realmente muito esquisito. Obrigado pela atenção mano

 

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_form_addon&stacked=h