减少链接之间的间距

Question

我知道这个问题已经被问了很多次了，但是，由于我是 HTML 的新手，我仍然需要一些指导。

根据下面的代码，如何减少每列链接之间的间距？

代码：

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 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/BrowardLife">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>

Answer 1

每一列的

padding

左右为

15px

。你可以减少它，例如到

8px

以减少间距。

这里是编辑代码，看看我的意思。

提示：也许在 bootstrap 中有一个 css-utility-class。

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

.row>div {
  padding-left: 8px;
  padding-right: 8px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 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/BrowardLife">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>

Answer 2

如果你使用 flexbox 你可以只使用

gap

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