Bootstrap 导航栏格式问题

Question

这是我的第一个 post 所以请多多包涵。我是编程新手，不久前报名参加了全栈开发课程。我最近重新开始上课，却卡在了 bootstrap 导航栏上。

我已按照 bootstrap 和导航栏说明进行操作，我知道 bootstrap 正在影响我本地主机上的浏览器页面，但格式在课程和多个课程中都存在问题我曾经尝试弄清楚的教程。当我将代码输入 codeply.com 时，其显示区域的格式没有任何问题。不知道是gemfile的问题，还是版本的问题，还是我经验不足没能考虑到。

我现在肯定卡在这个问题上了，非常感谢任何帮助！

这是我使用的代码：

  <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light">
             <a href="#" class="navbar-brand">Bootstrap 5</a>
             <button
               class="navbar-toggler"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#toggleMobileMenu"
               aria-controls="toggleMobileMenu"
               aria-expanded="false"
               aria-lable="Toggle navigation"
             >
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="toggleMobileMenu">
                 <ul class="navbar-nav mx-auto">
                     <li><a class="nav-link" href="#">Pricing</a></li>
                     <li><a class="nav-link" href="#">Features</a></li>
                     <li><a class="nav-link" href="#">Contact</a></li>
                     <li><a class="nav-link" href="#">Fourth One</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <h1>Hello, World!</h1>

这是正在发生的问题的图片： Bootstrap Navbar Issue

Answer 1

Boostrap 需要在您的计算机上加载 CSS 文件或将其 link 编辑在顶部。

像这样：

 <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

我建议使用他们的在线 links，因为它加载速度更快，除非您想手动更改内容，否则它会更快。

如果您将 bootstrap 下载到您的计算机，您需要 link 该文件。像这样：

<link rel="stylesheet" href="{% static 'css/style.css' %}">

请记住此代码段适用于 django。不确定你用的是什么。所以您可能需要编辑 href 部分。

Bootstrap 导航栏格式问题

Bootstrap Navbar formatting issues

html

css

twitter-bootstrap

bootstrap-sass