Question

我正在使用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>

Answer 1

更大，更小

大于或小于父元素的字体大小，大致为   比率用于分隔上面的绝对大小关键字。

请参阅MDN

您很可能没有看到字体大小的任何增加，因为font-size: larger从Bootstrap设置的body继承了它的基本大小，即14px，{{ 1}}默认为18px，因此您使用navbar-brand实际上减少字体大小。如果您在应用较大时检查larger类，则其大小计算为16.8px。

您可以随时使用px，em或rem设置它的大小。

请参阅工作示例代码段。

＆＃13;

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;

在bootstrap中增加.navbar-brand类的大小

1 个答案: