我正在使用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>最佳答案
larger, smaller
Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.
参见MDN
您很可能不会看到字体大小有任何增加，因为 font-size:large 继承了 Bootstrap 设置的 body 的基本大小，即14px，navbar-brand 默认为 18px，因此您实际上是通过使用更大来减小字体大小。如果您在应用较大值时检查 navbar-brand 类，则其大小计算为 16.8px。
您始终可以使用 px、em 或 rem 设置其大小。
请参阅工作示例片段。
.navbar.navbar-inverse .navbar-brand {
font-weight: bold;
font-size: 2.5rem;
}
.navbar.navbar-inverse .navbar-nav > li {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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">Brand Name</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">About Us</a>
</li>
<li>
<a href="#">Projects</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>关于html - 增加 Bootstrap 中 .navbar-brand 类的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35543507/