logo标签列表

如何增加Bootstrap导航栏品牌标志的字体大小？

htmlcsstwitter-bootstrapfontsfont-size
13

我有一个带有品牌标识的基本Bootstrap导航栏。我的HTML的开头如下所示：

<div class="wrapper">
    <div class="navbar navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">MyAwesomeCompany</a>
                etc.

它看起来像这样：

enter image description here

我现在想将字体更改为Lato并增加字体大小，因此我添加了以下内容到<head>中：

<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
.navbar-brand
{
  font-family: 'Lato', sans-serif;
  color:grey;
  font-size: 100px;
  margin: 0px;
}
</style>

但现在它的样子是这样的：

enter image description here

从css中可以看到我已经试图将字体大小增加到100像素，但它仍然很小。有人知道我如何增加品牌的font-size吗？欢迎所有的建议！

1
你能提供测试代码吗？ - pTi
尝试像Rahul在他的答案中所说的那样添加!important，它将覆盖您想要重新编辑的类的样式，但不是所有类，只有您用"!important"编写的属性。 - Giuseppe De Paola
它正在工作 https://jsfiddle.net/MadhawaMB/m2fkLrtf/ - Codeone
4个回答
18

只需使用font-size: 100px !important;希望这对您有所帮助。

1
还要考虑相对大小，例如 font-size:6.25rem。 - nilon
我正在观看一个教程...font-size: 100px 对他有效，但对我无效。使用 font-size: 100px !important 对我有效。为什么会这样？ - Akash Patel
不行，也太原始的解决方案了。我使用Bootstrap，所以不会写不必要的CSS。 - oren revenge
11

字体大小属性指定字体的大小或高度。 font-size 不仅影响应用它的字体，还用于计算 em、rem 和 ex 长度单位的值。 演示 试一下

.navbar-brand
{
  font-size: 100px;
}

绝对关键字和值

.navbar-brand
    {
      font-size: larger;
    }

它接受以下绝对关键字值：

xx-small

x-small

small

medium

large

x-large

xx-large


h1 {
    font-size: 250%;
}

h2 {
    font-size: 200%;
}

p {
    font-size: 100%;
}
<h1>MyAwesomeCompany</h1>
<h2>MyAwesomeCompany</h2>
<p>MyAwesomeCompany</p>

8
您可以使用以下方式进行操作。它不仅会将品牌名称作为链接，还会将其作为标题。通过使用不同的标题标签（将h1更改为h2、h3等），轻松更改字体大小。这对于搜索引擎也非常有效。
<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>
2

对于Bootstrap > 5，您可以使用以下内容：

<span class="navbar-brand mb-0 h1 fs-2">Your Brand</span>

您可以在Getbootstrap上获得更多信息。

希望这对您有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接