如何解决Bootstrap carousel-slider 在网页上不起作用
嗨，我最近开始使用引导程序，所以我是新手。我有一个很好的经验，因为它更容易构建和改编一个网站，因为我想使用那里的图书馆而不是我自己从头开始制作。现在我正在尝试将轮播滑块适应网站，但我一直失败。轮播从不出现。我曾尝试再次处理引导脚本和指向 html 文件的链接，但它不起作用。
下面的代码-----
<html lang="en">
<head>
<title>Martín Opertti</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="home">
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Data viz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="background">
<img src="perfilajustado4.png" class="img-fluid">
</div>
<div class="heading-content text-left">
<h1>Martín <br>
Opertti</h1>
</div>
</div>
<div id="about" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">About me</h1>
<hr class="w-50 mx-auto ">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-0.5">
<img src="imgilu3.png" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6 col-12 mt-5 pt-5">
<p> Soy licenciado en sociología y trabajo como Asistente (G. 2) en la Unidad de Métodos y Acceso a Datos
(FCS-UDELAR),y asistente en proyectos de investigación sobre opinión pública y comportamiento político en el
Departamento de Ciencias Sociales de la Universidad Católica del Uruguay,donde también soy docente de grado.
Mi
trabajo aparece en publicaciones como la Revista Latinoamericana de Opinión Pública y soy coautor del libro
"Twittarquía,la política de las redes en Uruguay".</p>
<h2>Skills</h2>
<hr>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<button class="btn w-50">
<a href="#">Know More</a>
</button>
</div>
</div>
</div>
<div id="research" class="container-fluid mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Research</h1>
<hr class="w-50 mx-auto ">
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-3 pt-5">
<h1>Stoic partisans</h1>
<p class="pt-3"> The power of the electorate to reward or to punish governments for their performance is
one of the
pillars of
conventional democratic theory,with economic perceptions as one of the most important issues for the
public
opinion. However,there is an ongoing debate over whether causality also flows the other way. This
article
aims
to test whether partisanship shapes economic perceptions while extending the argument to the context
of
a
developing economy. Furthermore,it analyses the impact of not only the direction of partisanship but
also
it´s
strength,an overlooked feature in the partisan bias literature. The analysis,which aggregates an
unusually
rich data set of Uruguayans´ economic evaluations for the 2001-2019 period,presents strong evidence
for
the
argument that both the direction and strength of partisanship produce great bias in economic judgments
even in
a
developing economy context where citizens are more vulnerable to economic shocks. These findings
suggest
a
rather unsettling scenario for electoral accountability in a significant part of the Uruguayan
electorate.
</p>
<a href="#" class="btn btn-lg btn-primary mb-3">Read More</a>
</div>
<div class=" grafic col-lg-6 col-md-6 col-12 mt-5 ">
<img src="ima6.png" class="img-fluid ">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-3 pt-5">
<h1>Stoic partisans</h1>
<p class="pt-3"> The power of the electorate to reward or to punish governments for their performance is
one of the
pillars of
conventional democratic theory,presents strong evidence
for
the
argument that both the direction and strength of partisanship produce great bias in economic judgments
even in
a
developing economy context where citizens are more vulnerable to economic shocks. These findings
suggest
a
rather unsettling scenario for electoral accountability in a significant part of the Uruguayan
electorate.
</p>
<a href="#" class="btn btn-lg btn-primary mb-3">Read More</a>
</div>
<div class=" grafic col-lg-6 col-md-6 col-12 mt-5 ">
<img src="ima6.png" class="img-fluid ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="dataviz" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Data viz</h1>
<hr class="w-50 mx-auto">
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<div class="card">
<img src="ima6.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Stoic partisans </h5>
<p class="card-text">The political conditioning of economic perceptions in Uruguay. Revista
Latinoamericana
de Opinión Pública,9(1),67-88.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 pb-5">
<div class="card">
<img src="ima6.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Stoic partisans </h5>
<p class="card-text">The political conditioning of economic perceptions in Uruguay. Revista
Latinoamericana
de Opinión Pública,67-88.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>```
----
Also I tried to errase some of the divs involved on the structure of the content inside the carousel but also I have no sucesess.
I colapsed the div that are not involved on the carousel. Hope someone could help me.
解决方法
问题是 -
- 如果你想使用 bootstrap-5，你必须使用 bootstrap-5 CDN，如果你想使用 bootstrap-4，你必须使用 bootstrap-4 CDN。
在 Bootstrap 5 中 data-* 属性被替换为 data-bs-*。
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
bootstrap-5 代码 -
<html lang="en">
<head>
<title>Martín Opertti</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="home">
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Data viz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="background">
<img src="perfilajustado4.png" class="img-fluid">
</div>
<div class="heading-content text-left">
<h1>Martín <br>
Opertti</h1>
</div>
</div>
<div id="about" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">About me</h1>
<hr class="w-50 mx-auto ">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-0.5">
<img src="imgilu3.png" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6 col-12 mt-5 pt-5">
<p> Soy licenciado en sociología y trabajo como Asistente (G. 2) en la Unidad de Métodos y Acceso a Datos
(FCS-UDELAR),y asistente en proyectos de investigación sobre opinión pública y comportamiento político en el
Departamento de Ciencias Sociales de la Universidad Católica del Uruguay,donde también soy docente de grado.
Mi
trabajo aparece en publicaciones como la Revista Latinoamericana de Opinión Pública y soy coautor del libro
"Twittarquía,la política de las redes en Uruguay".</p>
<h2>Skills</h2>
<hr>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<button class="btn w-50">
<a href="#">Know More</a>
</button>
</div>
</div>
</div>
<div id="research" class="container-fluid mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Research</h1>
<hr class="w-50 mx-auto ">
</div>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-3 pt-5">
<h1>Stoic partisans</h1>
<p class="pt-3"> The power of the electorate to reward or to punish governments for their performance is
one of the
pillars of
conventional democratic theory,with economic perceptions as one of the most important issues for the
public
opinion. However,there is an ongoing debate over whether causality also flows the other way. This
article
aims
to test whether partisanship shapes economic perceptions while extending the argument to the context
of
a
developing economy. Furthermore,it analyses the impact of not only the direction of partisanship but
also
it´s
strength,an overlooked feature in the partisan bias literature. The analysis,which aggregates an
unusually
rich data set of Uruguayans´ economic evaluations for the 2001-2019 period,presents strong evidence
for
the
argument that both the direction and strength of partisanship produce great bias in economic judgments
even in
a
developing economy context where citizens are more vulnerable to economic shocks. These findings
suggest
a
rather unsettling scenario for electoral accountability in a significant part of the Uruguayan
electorate.
</p>
<a href="#" class="btn btn-lg btn-primary mb-3">Read More</a>
</div>
<div class=" grafic col-lg-6 col-md-6 col-12 mt-5 ">
<img src="https://dummyimage.com/vga" class="img-fluid ">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-3 pt-5">
<h1>Stoic partisans</h1>
<p class="pt-3"> The power of the electorate to reward or to punish governments for their performance is
one of the
pillars of
conventional democratic theory,presents strong evidence
for
the
argument that both the direction and strength of partisanship produce great bias in economic judgments
even in
a
developing economy context where citizens are more vulnerable to economic shocks. These findings
suggest
a
rather unsettling scenario for electoral accountability in a significant part of the Uruguayan
electorate.
</p>
<a href="#" class="btn btn-lg btn-primary mb-3">Read More</a>
</div>
<div class=" grafic col-lg-6 col-md-6 col-12 mt-5 ">
<img src="https://dummyimage.com/vga" class="img-fluid ">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-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="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="dataviz" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Data viz</h1>
<hr class="w-50 mx-auto">
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<div class="card">
<img src="ima6.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Stoic partisans </h5>
<p class="card-text">The political conditioning of economic perceptions in Uruguay. Revista
Latinoamericana
de Opinión Pública,9(1),67-88.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 pb-5">
<div class="card">
<img src="ima6.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Stoic partisans </h5>
<p class="card-text">The political conditioning of economic perceptions in Uruguay. Revista
Latinoamericana
de Opinión Pública,67-88.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>和 bootstrap-4 代码：
<html lang="en">
<head>
<title>Martín Opertti</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="home">
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Data viz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="background">
<img src="perfilajustado4.png" class="img-fluid">
</div>
<div class="heading-content text-left">
<h1>Martín <br>
Opertti</h1>
</div>
</div>
<div id="about" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">About me</h1>
<hr class="w-50 mx-auto ">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-0.5">
<img src="imgilu3.png" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6 col-12 mt-5 pt-5">
<p> Soy licenciado en sociología y trabajo como Asistente (G. 2) en la Unidad de Métodos y Acceso a Datos
(FCS-UDELAR),la política de las redes en Uruguay".</p>
<h2>Skills</h2>
<hr>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<button class="btn w-50">
<a href="#">Know More</a>
</button>
</div>
</div>
</div>
<div id="research" class="container-fluid mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Research</h1>
<hr class="w-50 mx-auto ">
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mt-3 pt-5">
<h1>Stoic partisans</h1>
<p class="pt-3"> The power of the electorate to reward or to punish governments for their performance is
one of the
pillars of
conventional democratic theory,presents strong evidence
for
the
argument that both the direction and strength of partisanship produce great bias in economic judgments
even in
a
developing economy context where citizens are more vulnerable to economic shocks. These findings
suggest
a
rather unsettling scenario for electoral accountability in a significant part of the Uruguayan
electorate.
</p>
<a href="#" class="btn btn-lg btn-primary mb-3">Read More</a>
</div>
<div class=" grafic col-lg-6 col-md-6 col-12 mt-5 ">
<img src="https://dummyimage.com/vga" class="img-fluid ">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="dataviz" class="container mt-3 pb-5 pt-5">
<div class="post-heading text-center pb-5">
<h1 class="display-4 font-weight-bold">Data viz</h1>
<hr class="w-50 mx-auto">
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<div class="card">
<img src="ima6.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Stoic partisans </h5>
<p class="card-text">The political conditioning of economic perceptions in Uruguay. Revista
Latinoamericana
de Opinión Pública,67-88.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。