Bootstrap 更改导航栏字体大小 [英] Bootstrap change the navbar font-size
问题描述
我浪费了 2 个小时来寻找解决方案.我想更改导航栏的字体大小并更改字体大小，即使在媒体查询中也是如此.我可以更改颜色而不是字体，有时字体会在 col-lg 中更改大小，但不能在 media-queries
HTML
<!-- 收集导航链接、表单和其他用于切换的内容--><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">关于我们</span></a><li><a class="nav-links" href="whoweare.html"><span style="white-space: nowrap">我们是谁</span></a><li><a class="nav-links" href="mission.html">使命</a><li><a class="nav-links" href="activities.html">活动</a><li><a class="nav-links" href="gallery.html">画廊</a><li><a class="nav-links" href="donate.html">Donate</a><li><a class="nav-links" href="sitemap.html">站点地图</a><li><a class="nav-links" href="contactus.html"><span style="white-space: nowrap">联系我们</span></a></div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav>
<小时>
CSS
nav {宽度:100%；高度:40px；背景:-webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);背景:-o-线性梯度(#3f9a15、#388813、#3f9a15、#388813、#3f9a15)；背景:线性梯度(#3f9a15，#388813，#3f9a15，#388813，#3f9a15)；边界半径:6px！重要；-moz-border-radius: 6px !important;}.nav {颜色:白色！重要；字体大小:1.8em ！重要；}这是一个有效的演示 考虑到您想要在链接 Home 和 About 之间的 padding-right 等
对于链接，我使用了 css 类 .nav li
nav {宽度:100%；高度:40px；背景:-webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);背景:-o-线性梯度(#3f9a15、#388813、#3f9a15、#388813、#3f9a15)；背景:线性梯度(#3f9a15，#388813，#3f9a15，#388813，#3f9a15)；边界半径:6px！重要；-moz-border-radius: 6px !important;}.nav {颜色:白色！重要；字体大小:1.8em ！重要；}.nav li{填充右:5px;}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-lg but not in the media-queries
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
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;
}
Here is a working demo for you considering that you wanted padding-right between links Home and About etc.
For links i have used the css class .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;
}
这篇关于Bootstrap 更改导航栏字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
