Question

我已将这些文件包含在<head>标记

中的本地版本中

<link href="./css/bootstrap.min.css" rel="stylesheet" />
<link href="./css/bootstrap.css" rel="stylesheet" />    
<link href="./css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="./css/bootstrap-grid.css" rel="stylesheet" />
<link href="./css/bootstrap-reboot.min.css" rel="stylesheet" />
<link href="./css/bootstrap-reboot.css" rel="stylesheet" />

在</body>之前

：

<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/bootstrap.js"></script>

我正在使用的代码：https://getbootstrap.com/docs/3.3/components/#navbar-default

目前，导航栏显示未格式化/没有格式化，并且无法准确理解我缺少的内容

Answer 1

首先，您应该只包含一个CSS文件。 bootstrap(.min).css 包含网格并重新启动。检查here以获取有关CSS文件的信息。

接下来，您正在使用Bootstrap 3的文档.Bootstrap 4从版本3开始有重大突破更改。因此，请务必检查文档是否适用于v4。 Here是导航栏的文档。

此外，某些组件需要PopperJS，因此请确保包含它。

这是一个示例导航栏：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<nav class="navbar navbar-expand navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Bootstrap Nav菜单不会样式，我缺少什么？

1 个答案:

这是一个示例导航栏：