NavBar - Button's not align in center
css, html, ruby-on-rails, twitter-bootstrap
Solution
If you are trying to align them vertically and are using Bootstrap 3, just use this HTML.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Refer: http://getbootstrap.com/components/#navbar-buttons
Problem
I'm using bootstrap in my app rails =] But I'm with a boring problem. I want my button in navbar stay in the center. But I cant do that. I'm testing some options, if I put a input text, the buttons stay correct, but if I remove this input text, the buttons stay wrongs, they stay on top of navbar. Ps: I'm learning English, sorry for mistakes ![][] ![][] My code: ``` <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="brand"> <%= link_to(image_tag("logo-scaled.png", :size => "27x37"), root_path) %> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control"> </div> <a href="/hr_curriculum_interns/new"><btn class="btn btn-primary btn-sm"><b><%= t('labels.new_intern')%></b></btn></a> <a href="/hr_curriculum_systems_analysts/new"><btn class="btn btn-primary btn-sm"><b><%= t('labels.new_systems_analyst')%></b></btn></a> <a href="/hr_curriculum_generics/new"><btn class="btn btn-primary btn-sm"><b><%= t('labels.new_generic')%></b></btn></a> <a href="/vacancies/new"><btn class="btn btn-primary btn-sm"><b><%= t('labels.new_vacancy')%></b></btn></a> </form> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><%= current_user.username %> <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/users/<%= current_user.id %>/edit">Editar Perfil</a></li> <% if current_user.username == "admin" %> <li><a tabindex="-1" href="/users/">Usuários</a></li> <%end%> <li class="divider"></li> <li><a tabindex="-1" href="/vacancies/">Vagas</a></li> <li class="divider"></li> <li><a tabindex="-1" href="/logout/">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> ```