导航栏 - 按钮未在中心对齐

Question

我在我的app rails =]中使用bootstrap

但我有一个无聊的问题.我希望导航栏中的按钮保持在中心位置.

但我不能这样做.我正在测试一些选项,如果我输入一个输入文本,按钮保持正确,但如果我删除此输入文本,按钮会保持错误,它们会保持在导航栏的顶部.

Ps:我正在学英语,对不起错误

![] []

![] []

我的代码:

<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 -->

Answer 1

如果您尝试垂直对齐它们并使用Bootstrap 3,请使用此HTML.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

请参阅:http://getbootstrap.com/components/#navbar-buttons