Question

我最近开始学习HTML，CSS和引导程序。

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

这是代码

<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

感谢您的帮助。

Answer 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>

如David所述，nav-item没有填充，但是nav-link有填充。

以下是导航栏的资源：Bootstrap Navbars

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

Answer 2

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

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

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

Boostrap导航栏不会在项目之间添加空格

2 个答案: