CSS Bootstrap 更改导航栏字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33404154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap change the navbar font-size
提问by am guru prasath
I have wasted 2 hours, searching for the solution. I want to change the font size of the navbar and change the font-size even in the media queries. I can change the color not the font and sometimes the font changes size in the col-lgbut not in the media-queries
我浪费了 2 个小时，寻找解决方案。我想更改导航栏的字体大小并更改字体大小，即使在媒体查询中也是如此。我可以更改颜色而不是字体，有时字体会col-lg在media-queries
HTML
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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">
<li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li> <a class="nav-links" href="aboutus.html"><span style="white-space: nowrap">About Us</span></a> </li>
<li> <a class="nav-links" href="whoweare.html"><span style="white-space: nowrap">Who We Are</span></a> </li>
<li> <a class="nav-links" href="mission.html">Mission</a> </li>
<li> <a class="nav-links" href="activities.html">Activities</a> </li>
<li> <a class="nav-links" href="gallery.html">Gallery</a> </li>
<li> <a class="nav-links" href="donate.html">Donate</a> </li>
<li> <a class="nav-links" href="sitemap.html">Sitemap</a> </li>
<li> <a class="nav-links" href="contactus.html"><span style="white-space: nowrap">Contact Us</span></a> </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
CSS
nav {
width: 100%;
height: 40px;
background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
border-radius: 6px !important;
-moz-border-radius: 6px !important;
}
.nav a{
color: white !important;
font-size: 1.8em !important;
}
回答by Mike Ross
Here is a working demofor you considering that you wanted padding-rightbetween links Homeand Aboutetc.
这里是一个工作的演示为你考虑到你想要的padding-right链接之间Home和About等。
For links i have used the cssclass .nav li
对于链接，我使用了css该类.nav li
nav {
width: 100%;
height: 40px;
background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
border-radius: 6px !important;
-moz-border-radius: 6px !important;
}
.nav a{
color: white !important;
font-size: 1.8em !important;
}
.nav li{
padding-right:5px;
}
