基于给定Bootstrap代码，如何将文本颜色改为白色？

问题1：如何将文本颜色改为white？ #

有两种实用的实现方式：

方式一：自定义CSS统一设置 #

在现有CSS中新增样式，一次性将footer内所有链接设为白色，还可按需配置鼠标悬停状态：

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

/* 新增：统一设置footer内链接为白色 */
.footer-background a {
  color: #ffffff;
}

/* 可选：设置鼠标悬停时的颜色与样式 */
.footer-background a:hover {
  color: #cccccc;
  text-decoration: none;
}

方式二：使用Bootstrap内置类 #

利用Bootstrap 3提供的text-white类，直接给目标元素添加：

• 单个链接：<a href="xxx" class="text-white">...</a>
• 父元素（如<ul>）：<ul class="nav nav-pills text-white">...</ul>，所有子链接会自动继承白色

这种方式适合局部调整，若要统一修改所有footer链接，方式一更高效。

问题2：最初的文本蓝色是如何设置的？ #

这个蓝色是Bootstrap 3的全局默认样式。框架对页面中所有未自定义样式的<a>标签，默认设置了蓝色（color: #337ab7），因此你的链接会自动继承该颜色，无需额外代码。

修改后的完整代码示例 #

CSS

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

.footer-background a {
  color: white;
}

.footer-background a:hover {
  color: #ccc;
  text-decoration: none;
}

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<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 href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>
        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>
        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>
        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>
        <li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>
        <li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/B">Subscribe</a></li>
      </ul>
    </div>

    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a 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>

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