Bootstrap 哈巴狗中的旋转木马不滑动

Question

layout.pug

doctype html
html
  body
  head
    title= title
    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous')
    link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
    link(rel='stylesheet' href='stylesheets/style.css')
    block content
      .dropdown-menu(aria-labelledby='navbarDropdownMenuLink')
        a.dropdown-item(href='#') Action
        a.dropdown-item(href='#') Another action
        a.dropdown-item(href='#') Something else here
      a#navbarDropdownMenuLink.nav-link.dropdown-toggle(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown link
      ul.navbar-nav
        li.nav-item.active
          a.nav-link(href='#')
            | Home
            span.sr-only (current)
        li.nav-item
          a.nav-link(href='#') Features
        li.nav-item
          a.nav-link(href='#') Pricing
        li.nav-item.dropdown
    nav.navbar.navbar-expand-lg.navbar-light.bg-light
      a.navbar-brand(href='#') Navbar
      button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
      #navbarNavDropdown.collapse.navbar-collapse

index.js

#carouselExampleControls.carousel.slide(data-ride='carousel')
  .carousel-inner
    .carousel-item.active
      img.d-block.w-100(src='images/image2.jpg' alt='...')
    .carousel-item
      img.d-block.w-100(src='images/image3.jpg' alt='...')
  a.carousel-control-prev(href='#carouselExampleControls' role='button' data-slide='prev')
    span.carousel-control-prev-icon(aria-hidden='true')
    span.sr-only Previous
  a.carousel-control-next(href='#carouselExampleControls' role='button' data-slide='next')
    span.carousel-control-next-icon(aria-hidden='true')
    span.sr-only Next

当我在 chrome 浏览器上运行 localhost:8000 时，我可以看到图像 2。但是当我点击箭头 'Previous' 或 'Next' 时，它不会滑动。

我使用 Bootstrap CDN。但我不知道为什么它不起作用。 :/

Answer 1

我认为问题出在 bootstrap 版本中。检查它添加 bootstrap 版本 3.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Answer 2

.哈巴狗

doctype html
html
  body
  head
    title= title
    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous')
    link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
    link(rel='stylesheet' href='stylesheets/style.css')
    block content
      .dropdown-menu(aria-labelledby='navbarDropdownMenuLink')
        a.dropdown-item(href='#') Action
        a.dropdown-item(href='#') Another action
        a.dropdown-item(href='#') Something else here
      a#navbarDropdownMenuLink.nav-link.dropdown-toggle(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown link
      ul.navbar-nav
        li.nav-item.active
          a.nav-link(href='#')
            | Home
            span.sr-only (current)
        li.nav-item
          a.nav-link(href='#') Features
        li.nav-item
          a.nav-link(href='#') Pricing
        li.nav-item.dropdown
    nav.navbar.navbar-expand-lg.navbar-light.bg-light
      a.navbar-brand(href='#') Navbar
      button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
      #navbarNavDropdown.collapse.navb

Bootstrap 哈巴狗中的旋转木马不滑动

Bootstrap carousel doesn't slide in pug

javascript

node.js

carousel

pug