Question

我正在尝试在网页中包含轮播组件，但该组件与导航栏重叠。我试图删除导航栏，但轮播组件消失了。 html代码被编写为django的模板。我已经在控制台中检查了图像导入，并且该图像是从源文件夹中获取的。源文件夹中没有问题。

以下是轮播组件a.html的html代码：

{%extends 'common.html'%} {%block content%}
<div id="slides" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#slides" data-slide-to="0" class="active"></li>
    <li data-target="#slides" data-slide-to="1"></li>
    <li data-target="#slides" data-slide-to="2"></li>
    <li data-target="#slides" data-slide-to="3"></li>
    <li data-target="#slides" data-slide-to="4"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="/static/images/home/1.JPG" />
    </div>
    <div class="carousel-item">
      <img src="/static/images/home/2.JPG" />
    </div>
    <div class="carousel-item">
      <img src="/static/images/home/3.JPG" />
    </div>
    <div class="carousel-item">
      <img src="/static/images/home/4.JPG" />
    </div>
    <div class="carousel-item">
      <img src="/static/images/home/5.JPG" />
    </div>
  </div>
</div>

这是common.html的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/static/frontend/bootstrap.min.css" />
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="/static/css/style.css" />
</head>
  <body>
    {%load static%}
    <div id="navbar">
      <script src="{% static 'javascript/Navbar.js' %}"></script>
    </div>
    <div id="dashboard">
      {%block content%} {%endblock%}
    </div>
  </body>
</html>

Answer 1

这里您有2个问题，

您尚未在carousel-item上上课
ul中没有carousel-indicators，ol

这里是它的工作示例https://repl.it/repls/SoggySpecificIntroductory

Bootstrap Carousel组件与导航栏重叠

1 个答案: