How to change the font color & size in bootstrap 3 navbar
I'm new to bootstrap. I want to change the font color and size in the navbar but cant get it done. I cant seem to find out how to simply style anything on the navbar and currently the text in it looks very average. There are some answers here stackoverflow but they involve a lot of css just for some simple things and always have comments of how it that method is bad practice for x reason
here is what the text looks like.
I just need the text to not be hugging the top of the page with even gap between the top and bottom of the navbar, and be able to style the text (change the size and color and remove the bullet point next to 'Account').
here is the navbar coding (i'm also using ruby on rails)
<header class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header pull-left">
<%= link_to "site name", root_path, id: "logo" %>
</div>
<nav>
<div class="navbar-header pull-right">
<ul>
<% if logged_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Notifications", user_user_notifications_path(current_user) %></li>
<li><%= link_to "Mailbox", user_conversations_path(current_user) %></li>
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Log in/ Signup", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>
How can this be done in bootstrap 3?
You can simply add the following <a href="#" class="dropdown-toggle" data-toggle="dropdown"><font color="your-color-choice" size=""> Account <b class="caret"></b></font> </a>
To get your text in the middle of the block, you check out the following code: https://www.w3.org/Style/Examples/007/center.en.html#vertical
basically you have to use, vertical align:middle;
Hope this helps!
链接地址: http://www.djcxy.com/p/29982.html上一篇: 如何从列表中删除点