为啥我在引导程序的轮播组件中看不到上一个和下一个箭头？
Posted
技术标签:
【中文标题】为啥我在引导程序的轮播组件中看不到上一个和下一个箭头？【英文标题】：Why can't I see previous and next arror in my carousel component in bootstrap?为什么我在引导程序的轮播组件中看不到上一个和下一个箭头？ 【发布时间】：2021-04-15 13:02:40 【问题描述】：一切都很顺利，但我在幻灯片放映中没有看到左右箭头。我应该怎么做才能修复它？我完全按照引导文档中的内容做了。我试图在谷歌上查看，但找不到与此问题相关的任何内容。我需要你的帮助来解决这个问题，拜托。 （它仍然没有上传我的帖子，所以填补空白）
body .container-fluid
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
body
text-align: center;
.title-image
width:100%;
.download-button
margin: 15px 13px;
.big-heading
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
.first_part
color: white;
background-color: #F27E48;
text-align: left;
.container-fluid
padding: 3% 3% 6% 5% !important;
.navbar-brand
font-family: 'Ubuntu', sans-serif;
#courses
padding:50px 100px 50px;
background-color: azure;
#courses>p /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
.card-body p
text-align: left;
#how
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
#how img
height:280px;
width:330px;
.row div
margin-top:10px;
.outcome
width:70%;
margin:20px auto;
background-color: rgb(236, 223, 223) ;
border-radius: 8px;
.big
font-weight: bold;
font-size: 2rem;
font-family: 'Noto Serif', serif;
#outcomes
padding:50px 70px 50px;
#outcomes a
border:1px solid black;
border-radius: 10px;
#outcomes a:hover
color: white;
background-color: gray;
.student-image
height: 350px;
width: 450px;
#comments
padding: 50px 70px 50px;
background-color: azure;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<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">
<!-- javascript Bundle with Popper -->
<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>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comments">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" >
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>400$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>1300$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>700$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" >
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" >
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" >
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="fulltime-tab" data-bs-toggle="tab" href="#fulltime" role="tab" aria-controls="fulltime" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="parttime-tab" data-bs-toggle="tab" href="#parttime" role="tab" aria-controls="parttime" aria-selected="false">Part Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="online-tab" data-bs-toggle="tab" href="#online" role="tab" aria-controls="online" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="myTab-content">
<div
class="tab-pane fade show active"
id="fulltime"
role="tabpanel"
aria-labelledby="fulltime-tab"
>
<p class="big">$70,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">80%</p>
<p class="small">Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="parttime"
role="tabpanel"
aria-labelledby="parttime-tab"
>
<p class="big">$60,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">75%</p>
<p class="small">Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="online"
role="tabpanel"
aria-labelledby="online-tab"
>
<p class="big">$40,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">65%</p>
<p class="small">Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
<!-- Comments -->
<section id="comments">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>I took the fulltime program course. It was amazing. Up to date curriculum, and the best instructors in their field</p>
<img src="student1.jpg" class="student-image" >
<em>Selena, Miami</em>
</div>
<div class="carousel-item">
<p>I took the part time program course, and I got full stack python developer job only in 20 days within graduation.</p>
<img src="student2.jpg" class="student-image" >
<em>Anna, Moscow</em>
</div>
<div class="carousel-item">
<p>This course made me job ready. Don't waste time with other time wasting courses. This is what you have been looking for!</p>
<img src="student3.jpg" class="student-image" >
<em>Taylor, Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</body>
</html>【问题讨论】：
【参考方案1】：背景颜色和按钮颜色为白色。
添加背景颜色，如下所示：
#comments
background-color: #ff0000;
Codepen：https://codepen.io/manaskhandelwal1/pen/yLaxyyV
或者改变按钮的颜色，像这样：
.carousel-control-prev-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
.carousel-control-next-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
欲了解更多信息：https://***.com/a/49017805/11171286
Codepen：https://codepen.io/manaskhandelwal1/pen/qBaMEdK
【讨论】：
但是评论区的背景色，我之前做了天蓝色的。为什么它没有显示按钮，因为我改变了背景颜色？哦，我弄错了。天蓝色就像白色，发白的颜色，所以看不到纽扣。谢谢 是的，天蓝色是一种非常浅的颜色。出于测试目的，请始终使用红色、蓝色、绿色。以上是关于为啥我在引导程序的轮播组件中看不到上一个和下一个箭头？的主要内容，如果未能解决你的问题，请参考以下文章