URL 分行，不同的间距和适当的颜色

Question

根据下面的代码，我怎样才能让

URLs

在新的一行中，如下面的屏幕截图所示，间距相似？

请注意，我不是每天都编写 HTML 代码，所以我在这方面相当外行。

如果需要，这是相关产品链接。

HTML代码：

<div class="footer-background">
  <div class="container-fluid">
    <div class="col-xs-12">
    </div>
    <div class="col-xs-6 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>

      </ul>
    </div>
    <div class="col-xs-6 center-block">
      <ul class="nav nav-pills" style="float:right;">
        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Service</a></li>
      </ul>
    </div>
    <div class="col-xs-12">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
      </div>
    </div>
  </div>
  
</div>

另外，如何将颜色更改为屏幕截图中显示的颜色？我确实在 CSS 代码中添加了正确的十六进制值，但没有用。

CSS代码：

  .footer-background {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #000077c;
  }

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

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

期望的输出：

1. 我无法将 URL 换行
2. 无法添加

   Watch Meetings

   （URL）

   centered

   如截图所示
3. 如屏幕截图所示，在底部中心添加

   Copyright 2022, [Government](URL)

4. 无法更改页脚背景颜色
5. 将文字颜色更改为

   light blue

Answer 1

试试这个：

  .footer-background {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #00077c;
  }

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

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="3">watch meetings</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">
        <li><a href="3">facebook</a></li>
      </ul>
      </div>
    </div>
  </div>
  
</div>