Bootstrap Carousel组件与导航栏重叠

Question

I am trying to include carousel component in my web page but it is overlapping with the nav bar. 我试图在我的网页中包含轮播组件，但它与导航栏重叠。 I tried to remove the navbar but the carousel component disappears. 我试图删除导航栏但旋转木马组件消失了。 The html code is written as template for django. html代码被写为django的模板。 I have checked the image import in console and the image is taken from source folder. 我已经在控制台中检查了图像导入，图像是从源文件夹中获取的。 There is no problem in the source folder. 源文件夹中没有问题。

Here is the html code for carousel component a.html: 这是carousel组件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>

Here is the code for common.html 这是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

Here you have 2 problem, 这里有2个问题，

You haven't active class in your carousel-item 您的carousel-item没有活动课程
There is no ul in carousel-indicators , its ol 没有ul在carousel-indicators ，其ol

Here working example of it https://repl.it/repls/SoggySpecificIntroductory 这是它的工作示例https://repl.it/repls/SoggySpecificIntroductory

Bootstrap Carousel组件与导航栏重叠

问题描述

1 个解决方案

解决方案1
0 2019-06-13 09:34:05

Bootstrap Carousel组件与导航栏重叠

问题描述

1 个解决方案

解决方案1 0 2019-06-13 09:34:05

解决方案1
0 2019-06-13 09:34:05