为什么我的引导控件不起作用？答案

【问题标题】：Why aren't my Bootstrap Controls working?为什么我的引导控件不起作用？
【发布时间】：2020-08-13 06:50:41
【问题描述】：

我正在尝试制作一个引导轮播，它一次包含 3 个项目，并且具有切换到下一个项目的控件。我创建了这个显示三个项目的轮播，唯一的问题是控件在单击时不起作用，不太确定我缺少什么。

I wrote a codepen with an example of my code here.

下面是我的 HTML 以便快速参考。

<div class="container">
  <div id="casesCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="row">
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>0</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>1</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>2</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>3</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>4</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>5</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>6</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>7</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>8</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#casesCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#casesCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
 </div>

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-carousel

【解决方案1】：

您在这里缺少一个指向启用 caroussel 工作的 java 脚本的链接。

将以下代码添加到页面标题

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

然后刷新ctrl+F5后重试。 Caroussel 不适用于纯 HTML 和 CSS，它需要来自 bootstrap 的 js 库

【讨论】：

在codepen中我加载了这些，但仍然没有运气。
在您的网络服务器上更好地尝试一下。只需在 head 标签中包含所有必要的库。然后检查控制台中的错误（chrome 中的 ctrl+shift+i）。如果您在此处看到错误，请在此处显示。
如果您可以从测试站点的机器上打开它们，请检查对这些脚本的访问权限。
它在头脑中。我有另一个轮播，每张幻灯片只包含一个项目，它也有不同的轮播 ID，并且工作正常。它也在同一页面上。

【解决方案2】：

你发现这个例子在codepen中有错误；

bootstrap.min.js:6 Uncaught TypeError: Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须 @* 被包含在 Bootstrap 的 JavaScript 之前。在 Object.jQueryDetection (bootstrap.min.js:6) 在 bootstrap.min.js:6 在 bootstrap.min.js:6 在 bootstrap.min.js:6 *@

bootstrap JS 源未添加到文件并在启动时出错。请检查您的引导 JS 存在和版本以完成此操作。

【讨论】：

【解决方案3】：

没有注意到row and columnremove 这个。并访问bootstrap-carousel

并添加jquery

【讨论】：