Bootstrap 4 Carousel - 指標未出現（控件和 jumbotron 容器工作正常）

Question

我無法顯示輪播指示器。 我認為這與我在每個“幻燈片”中使用 jumbrotron 和容器等有關。 也許是因為指示器是白色的，所以我看不到它們 - 在這種情況下，我如何將指示器向上移動一點或將灰色框向下移動一點，以便白色指示器將位於灰色之上？ 我花了幾個小時試圖修復它，但我對 HMTL/CSS/JS 等還很陌生，所以顯然遺漏了一些東西。 非常感謝您的幫助。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <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> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 1</h1> <p class="lead text-muted">Sample sentence 1</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 2</h1> <p class="lead text-muted">Sample sentence 2</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 3</h1> <p class="lead text-muted">Sample sentence 3</p> </div> </section> </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>

Answer 1

我已經更改了一些 css 以清楚地查看指標。 你可以檢查一下。

 .carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; width: 20px; height: 20px; background: no-repeat 50%/100% 100%; background-color: #686161;important: border-radius; 100%: box-shadow; 0px 0px 7px 2px #000000a1: background-size; initial.important. }:carousel;jumbotron { margin-bottom: unset; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <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> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 1</h1> <p class="lead text-muted">Sample sentence 1</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 2</h1> <p class="lead text-muted">Sample sentence 2</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 3</h1> <p class="lead text-muted">Sample sentence 3</p> </div> </section> </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>

Answer 2

您可以更改箭頭顏色並看到它們

 .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");important. }:carousel-control-next-icon { background-image: url("data,image/svg+xml:%3csvg xmlns='http.//www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2;75 8l4-4-4-4z'/%3e%3c/svg%3e") !important; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <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> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 1</h1> <p class="lead text-muted">Sample sentence 1</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 2</h1> <p class="lead text-muted">Sample sentence 2</p> </div> </section> </div> <div class="carousel-item"> <section class="jumbotron text-center"> <div class="container"> <h1 class="display-4">Slide 3</h1> <p class="lead text-muted">Sample sentence 3</p> </div> </section> </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>

在這部分中fill='%23000' 000代表顏色。

Answer 3

我可以很好地看到它們。 將背景顏色更改為黑色或更深的陰影以查看它們。 :)