2014-02-19 111 views
4

我在我的應用程序導軌中使用引導程序=]NavBar - 按鈕的中心不對齊

但是我有一個無聊的問題。我想讓導航欄中的按鈕保持在中心位置。

但我不能這樣做。我正在測試一些選項,如果我輸入文本,按鈕保持正確,但如果我刪除此輸入文本,按鈕保持錯誤,它們將保持在導航欄的頂部。

!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="https://stackoverflow.com/users/<%= current_user.id %>/edit">Editar Perfil</a></li> 
     <% if current_user.username == "admin" %> 
      <li><a tabindex="-1" href="https://stackoverflow.com/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 --> 

回答

10

如果您試圖垂直對齊並使用Bootstrap 3,只需使用此HTML。

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

參見:http://getbootstrap.com/components/#navbar-buttons

+0

哇,這麼快,非常感謝,完美的作品=] –

+0

不客氣! –