文章/答案/技术大牛

发布

社区首页 >问答首页 >如何增加Bootstrap navbar-font font-size？

问如何增加Bootstrap navbar-font font-size？
EN

Stack Overflow用户

提问于 2015-12-30 18:36:26

回答 4查看 41.4K关注 0票数 7

我有一个基本的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.

它看起来像这样：

现在，我希望将字体更改为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>

但现在它看起来像这样：

正如您在css中看到的，我尝试将字体大小增加到100像素，但它仍然很小。谁知道我能做些什么来提高品牌的font-size？欢迎所有提示！

html

css

twitter-bootstrap

fonts

font-size

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-12-30 18:38:13

只要使用font-size: 100px !important;就可以了，希望这能对你有所帮助。

票数 13

Stack Overflow用户

发布于 2015-12-30 19:36:42

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

.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>

票数 9

Stack Overflow用户

发布于 2018-01-15 14:48:40

您可以执行类似以下的操作。它不仅会让你的品牌名称成为一个链接，还会让它成为一个标题。通过使用不同的标题标签轻松更改字体大小(将h1更改为h2、h3等)。这对搜索引擎来说也是有效的。

<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34527775

复制

相似问题

问如何增加Bootstrap navbar-font font-size？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何增加Bootstrap navbar-font font-size？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何增加Bootstrap navbar-font font-size？
EN