Bootstrap 导航栏不会在项目之间添加空格答案

【问题标题】：Boostrap nav bar does not add spaces between itemsBootstrap 导航栏不会在项目之间添加空格
【发布时间】：2020-09-11 19:30:19
【问题描述】：

我最近开始学习 HTML、CSS 和 bootstrap。

我正在测试导航栏，但我不确定为什么导航栏中的项目之间没有空格。

这里是代码

<html>
<head>
<title>Bootstrap Nav Bars </title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-expand navbar-light bg-light">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Kofee</a>
  </div>
  <div class="nav navbar-nav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-item" href="#">About</a></li>
      <li class="nav-item"><a class="nav-item" href="#">Contact</a></li>
      <li class="nav-item"><a class="nav-item" href="#">Products</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

here is the screenshot of how it shows to me

感谢您抽出宝贵时间提供帮助。

【问题讨论】：

链接上的类应该是nav-link，而不是nav-item。 nav-link 类有填充。
这类似于stackoverflow.com/questions/49805650/…

标签： html css bootstrap-4

【解决方案1】：

尝试以下方法：

<html>
<head>
<title>Bootstrap Nav Bars </title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-expand navbar-light bg-light">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Kofee</a>
  </div>
  <div class="nav navbar-nav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

正如大卫所说，nav-item 没有填充，但nav-link 有。

这里是导航栏的资源：@987654321@

使用此资源，我可以看到标准是在导航栏中使用nav-item 标记<li> 和nav-link 标记<a>。

【讨论】：

【解决方案2】：

<a> 标签中添加了不正确的类
只需将 nav-item 类替换为 <a> 标记内的 nav-link 类，它就会处理填充和边距。
更改--

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

对所有<li>执行相同操作
注意：- 从 Bootstraps 官方网站下载 zip 文件并参考 css/bootstrap.min.css 文件以检查实际代码。 nav-item 类没有任何边距或填充。

【讨论】：