如何使文本链接更紧密？答案

【问题标题】：How to make text links closer together?如何使文本链接更紧密？
【发布时间】：2022-01-25 05:22:22
【问题描述】：

一个初学者新手问题：如何使桌面视图上的链接（关于、项目和联系人）更接近一点？使用引导程序 - 我不知道这是否有所作为。我尝试过使用填充和边距，但它仍然无法正常工作。

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.navbar-light .navbar-brand {
  margin: 25px;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  color: #222222;
}

.navbar-light .navbar-nav .nav-link {
  margin: 25px;
  padding-top: 20px;
  color: #222222;
  font-size: 1rem;
  font-family: "Khula", sans-serif;
  font-weight: 400;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">
    <div class="col-md-12">

      <nav class="navbar navbar-expand-lg navbar-light ">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">Logo</a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-link" href="#about">About</a>
              <a class="nav-link" href="#howto">Projects</a>
              <a class="nav-link" href="#faqs">Contact</a>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>

【问题讨论】：

标签： html css

【解决方案1】：

您的问题对于您要做什么含糊不清。

如果您希望链接更靠近，您可能希望将边距值从25px; 降低。

如果您只想在“桌面视图”上执行此操作，则可以覆盖 media query 中的边距值。

@media (min-width: 1000px) {
    .navbar-light .navbar-nav .nav-link {
        margin: 10px;
    }
}

【讨论】：