Bootstrap导航栏navbar-brand字体大小与navbar下内边距设置失效怎么解决

原因 #

Bootstrap内置的导航栏样式优先级高于你编写的自定义CSS，导致设置的padding-bottom和font-size被默认规则覆盖。

解决方法 #

你可以任选以下一种方案实现样式自定义：

• 调整样式文件引入顺序：将自定义CSS文件放在Bootstrap CSS文件的后方引入，同优先级下后加载的样式会覆盖前置样式。
• 提升自定义选择器权重：给现有选择器拼接父级选择器拉高优先级，修改后代码如下：

#title .navbar {
  padding-bottom: 4.5rem;
}

#title .navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

• 强制覆盖规则（仅建议应急使用，不推荐大范围添加）：给样式属性添加!important标识：

.navbar {
  padding-bottom: 4.5rem !important;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem !important;
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者ahmed magdy