我正在使用bootstrap
并在我的HTML代码
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
我想increase the font size
,因此我将其修改为
<a class="navbar-brand" style="font-weight: bold;font-size: larger">Brand Name</a>
。
然而,这并没有改变任何事情。我做错了什么我假设bootstrap css is overriding my commands
,如何强制它increase the font size
?谢谢。
工作片段(我想增加网站中品牌名称的大小)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Brand Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="MyStyleSheet.css" />
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!---logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
</div>
<!--menu Item here-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#" style="font-weight: bold">About Us</a>
</li>
<li>
<a href="#" style="font-weight: bold">Projects</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" style="font-weight: bold">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
答案 0 :(得分:0)
更大,更小
大于或小于父元素的字体大小,大致为 比率用于分隔上面的绝对大小关键字。
请参阅MDN
您很可能没有看到字体大小的任何增加,因为font-size: larger
从Bootstrap设置的body
继承了它的基本大小,即14px,{{ 1}}默认为18px,因此您使用navbar-brand
实际上减少字体大小。如果您在应用较大时检查larger
类,则其大小计算为16.8px。
您可以随时使用px,em或rem设置它的大小。
请参阅工作示例代码段。
navbar-brand
&#13;
.navbar.navbar-inverse .navbar-brand {
font-weight: bold;
font-size: 2.5rem;
}
.navbar.navbar-inverse .navbar-nav > li {
font-weight: bold;
}
&#13;