Bootstrap v4：轮播在第一张幻灯片后消失:(

Posted

技术标签:

【中文标题】Bootstrap v4：轮播在第一张幻灯片后消失:(【英文标题】：Bootstrap v4: carousel dissapear after first slide :( 【发布时间】：2021-07-24 10:12:11 【问题描述】：

（注意：我是一名学生，正在学习，请先生们不要对这个问题生气，谢谢。）

长话短说：

我有我的引导程序 v4 轮播 *(https://getbootstrap.com/docs/4.0/components/carousel/)。 我将它集成到我的网站标题中效果很好，但在第一张幻灯片后轮播消失了。

尝试起飞容器类，认为可能与轮播位置冲突，但没有，没有帮助。

（在 bootstrap 上搜索，在 *** 上，nada :()

各位设计师，能帮帮我吗？

提前致谢。

附：图像大小相同。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=noS">
 <title>Home</title>

 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
 <!-- Custom styles for this template -->
 <link href="css/business-frontpage.css" rel="stylesheet">
 <!-- Latest compiled and minified CSS -->
 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Italianno&display=swap" rel="stylesheet"> 
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Bienvenue  </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Accueil
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>   
        </ul>
      </div>
    </div>
    <form class="form-inline my-2 my-lg-0">
            <a class="nav-link" href="#">ENG</a>
            <a class="nav-link" href="#">GER</a>
            <a class="nav-link" href="#">FR</a>
    </form>  
</nav>
   
<!-- Header -->
<!-- carousel -->
  <header class="bg-primary bg-dark py-3 mb-5">
    <div class="container h-100">   
     <div id="carousel" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators"> 
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
     </ol>
         
     <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="1.jpg"  class="img-fluid">
            <div class="carousel-item">
            <img src="11.jpg" class="img-fluid">
          </div>
        </div>

        <a class="left carousel-control" href="carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
        </span></a>
      </div>
      
      <div class="main-text hidden-xs">
        <div class="col-md-12">
            <p class="h1"><span><b>text</b></span></p><h1 class="text-white"><span><b>&nbsp &nbsp &nbsp text</b></span></h1></b>
        </div>
      </div>
        </header>
<!-- carousel -->

【问题讨论】：

【参考方案1】：

您拥有的轮播代码适用于 Bootstrap 3（Bootstrap 3 使用字形图标，而 Bootstrap 4 使用 SVG）。你没有包含你使用的 CSS 或 JS，所以我不确定你使用的是什么版本。

我将 Bootstrap 4 轮播与您在 sn-p 中的导航栏结合起来，以便您可以看到它的运行情况。由于您在导航栏上使用了fixed-top，因此您需要在第一部分添加额外的边距以使其在导航栏下方的间距（我添加了 4.5rem）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Bienvenue </a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Accueil
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Service</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        <form class="form-inline my-2">
            <a class="nav-link px-2" href="#">ENG</a>
            <a class="nav-link px-2" href="#">GER</a>
            <a class="nav-link px-2" href="#">FR</a>
        </form>
    </div>
</nav>

<!-- Header -->
<!-- carousel -->
<header class="bg-primary bg-dark py-3 mb-5" style="margin-top: 4.5rem;">
    <div class=" container h-100">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://via.placeholder.com/1110x380.png/0000FF/FFFFFF?text=Slide+1" class="d-block w-100" >
                </div>
                <div class="carousel-item">
                    <img src="https://via.placeholder.com/1110x380.png/00FFFF/FFFFFF?text=Slide+2" class="d-block w-100" >
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="main-text hidden-xs">
            <div class="col-md-12">
                <p class="h1"><span><b>text</b></span></p>
                <h1 class="text-white"><span><b>&nbsp &nbsp &nbsp text</b></span></h1>
            </div>
        </div>
    </div>
</header>
<!-- carousel -->

在询问与网页设计相关的问题时，最好使用 sn-p 工具。

【讨论】：

非常感谢德伯克先生，我真的不明白为什么它不适合。确实工作得很好！

以上是关于Bootstrap v4：轮播在第一张幻灯片后消失:(的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap 3 多列响应式轮播

Bootstrap轮播使文本逐个字母出现

暂停和启动带有视频的幻灯片的 Bootstrap 4 轮播

jQuery Text Resizing Plugin 仅适用于 Bootstrap Carousel 的第一张幻灯片

Bootstrap 4 垂直轮播在 Bootstrap 5 beta 中不起作用

我正在尝试将 Vue 数据实现到 Bootstrap 轮播中