Bootstrap v4：第一张幻灯片后轮播消失:(
Bootstrap v4: carousel dissapear after first slide :(
(注意：我是学生，正在学习中，请各位大侠不要生气，谢谢。)
长话短说：
我有我的 bootstrap v4 轮播 *(https://getbootstrap.com/docs/4.0/components/carousel/)。
我将它集成到我的网站上 header 效果很好，但在第一张幻灯片后轮播消失了。
尝试起飞容器 class，认为可能与转盘位置冲突但没有，没有帮助。
（在 bootstrap 上搜索，在 Whosebug 上，nada :( )
各位设计师，能帮帮我吗？
提前致谢。
P.s。图片大小相同。
<!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>      text</b></span></h1></b>
</div>
</div>
</header>
<!-- carousel -->
您拥有的轮播代码适用于 Bootstrap 3（Bootstrap 3 使用字形，而 Bootstrap 4 使用 SVG）。您没有包含您正在使用的 CSS 或 JS，所以我不确定您使用的是哪个版本。
我在代码段中将 Bootstrap 4 旋转木马与您的导航栏组合在一起，以便您可以看到它的运行情况。由于您在导航栏上使用 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" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1110x380.png/00FFFF/FFFFFF?text=Slide+2" class="d-block w-100" alt="...">
</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>      text</b></span></h1>
</div>
</div>
</div>
</header>
<!-- carousel -->
在询问与网页设计相关的问题时，最好使用代码段工具。
(注意：我是学生，正在学习中，请各位大侠不要生气，谢谢。)
长话短说：
我有我的 bootstrap v4 轮播 *(https://getbootstrap.com/docs/4.0/components/carousel/)。 我将它集成到我的网站上 header 效果很好，但在第一张幻灯片后轮播消失了。
尝试起飞容器 class，认为可能与转盘位置冲突但没有，没有帮助。
（在 bootstrap 上搜索，在 Whosebug 上，nada :( )
各位设计师，能帮帮我吗？
提前致谢。
P.s。图片大小相同。
<!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>      text</b></span></h1></b>
</div>
</div>
</header>
<!-- carousel -->
您拥有的轮播代码适用于 Bootstrap 3（Bootstrap 3 使用字形，而 Bootstrap 4 使用 SVG）。您没有包含您正在使用的 CSS 或 JS，所以我不确定您使用的是哪个版本。
我在代码段中将 Bootstrap 4 旋转木马与您的导航栏组合在一起，以便您可以看到它的运行情况。由于您在导航栏上使用 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" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1110x380.png/00FFFF/FFFFFF?text=Slide+2" class="d-block w-100" alt="...">
</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>      text</b></span></h1>
</div>
</div>
</div>
</header>
<!-- carousel -->
在询问与网页设计相关的问题时，最好使用代码段工具。