如何修改Bootstrap页脚的字体大小与格式？两种尝试方案均无效

我尝试了两种修改字体大小的方案，但都没有效果：

• 方案1（无效）：

.text-large {
  font-size: 150%;
}

• 方案2（无效）：

html {
    font-size: 16px;
} 

相关代码如下：

CSS代码 #

a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav .external-link {
  padding: 2px;
}

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a class="external-link" href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>
        <li><a class="external-link" href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>
        <li><a class="external-link" href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>
        <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>
        <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>
        <li><a class="external-link" href="https://lp.constantcontactpages.com/su/ErJFVZz/BrowardLife">Subscribe</a></li>
      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a class="external-link" href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a class="external-link" href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">
        </ul>
      </div>
    </div>
  </div>
</div>

为什么之前的方案无效？ #

1. 方案1中的.text-large类未应用到任何HTML元素上，无法生效。
2. 方案2修改html字体大小，但Bootstrap框架自带样式优先级更高，会覆盖全局设置，导致页脚链接字体无变化。

有效修改字体大小的方法 #

直接针对目标元素（页脚内的.external-link链接）设置字体大小，通过CSS选择器优先级覆盖Bootstrap默认样式：

.nav .external-link {
  padding: 2px;
  font-size: 18px; /* 自定义固定大小，可替换为百分比如120% */
}

若需全局调整所有文本，可使用更高优先级选择器覆盖Bootstrap设置：

body {
  font-size: 16px !important; /* 仅在必要时使用!important，优先通过样式加载顺序提升优先级 */
}

更推荐的方式是将自定义CSS放在Bootstrap样式之后引入，无需依赖!important即可覆盖默认样式。

修改字体格式的方法 #

可在同一个选择器内添加字体样式、粗细、行高等格式属性：

.nav .external-link {
  padding: 2px;
  font-size: 18px;
  font-family: "Arial", sans-serif; /* 指定字体 */
  font-weight: 600; /* 设置字体粗细，600为半粗 */
  line-height: 1.5; /* 调整行高 */
  text-decoration: underline; /* 添加下划线 */
}

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