[英]How can I align my navbar buttons?
My navigation bar currently looks like this: 我的导航栏当前如下所示:
My code is below: 我的代码如下:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Text Planner
</a>
</div>
<% if user_signed_in? %>
<p class="navbar-text navbar-left">Welcome, <strong><%= current_user.first_name.to_s+" "+current_user.last_name.to_s %></strong></p>
<div class="nav navbar-nav navbar-right">
<%= link_to "Home", home_path, :class => 'btn btn-default navbar-button' %>
<div class="btn btn-default dropdown-toggle navbar-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</div>
<ul class="dropdown-menu">
<li><%= link_to "Search For Events", root_path %></li>
<li><%= link_to "My Bookmarks", user_bookmarks_path(current_user.id)%></li>
<li><%= link_to "My Upcoming Reminders", user_reminders_path(current_user.id)%></li>
<li><%= link_to "My Profile", user_path(current_user.id)%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
</ul>
</div>
<% else %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", home_path, :class => 'navbar-text' %></li>
<li><%= link_to "Sign up", new_user_registration_path, :class => 'navbar-text' %></li>
<li><%= link_to "Login", new_user_session_path, :class => 'navbar-text' %></li>
</ul>
<% end %>
</div>
</nav>
How do I move the home and menu buttons to the left and center them vertically? 如何将主屏幕和菜单按钮向左移动并使它们垂直居中? Also, I would like to keep them clickable buttons while removing the outline of a button with the white background so they match the left side of my navigation bar.
另外,我想让它们保持可点击的按钮,同时删除具有白色背景的按钮的轮廓,以便它们与我的导航栏的左侧匹配。 Thanks in advance.
提前致谢。
It's very simple, actually, set your line-height and div height to the same (here's a quick example): 实际上,这非常简单,将line-height和div height设置为相同(这里是一个简单的示例):
#navbar a{
width: 200px;
height: 40px;
display:inline-block;
color:white;
line-height:40px;
}
This is provided your buttons are formed using CSS, but I believe it works for other elements, as well. 前提是您的按钮是使用CSS形成的,但我相信它也适用于其他元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.