我在尝试向项目中添加carousel元素时遇到了这个问题。我的代码的结果是一个工作的carousel;箭头工作得很好，如果我添加一个自动播放选项，它也工作。然而，内容本身并不在箭头之间。
首先，我在bootstrap的header部分包含了以下代码行，这些代码是我通过npm下载的：
<link rel="stylesheet" href="./src/main.css">
<script src="./node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>然后，我为carousel添加了与bootstrap文档中完全相同的元素：
<div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
<div class="carousel-inner">
<div class="carousel-item active"><h3>hello</h3></div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
<div class="carousel-item">5</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>如前所述，内容本身不在箭头之间。
如果有人能帮我弄清楚为什么会发生这种情况，我会非常感谢他们！
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
<div class="carousel-inner">
<div class="carousel-item active">
<h3>hello</h3>
</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
<div class="carousel-item">5</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
2条答案
按热度按时间carvr3hs1#
内容不应该在箭头之间。如果您使用浏览器的检查器查看演示，您将看到控件位于内容上方。内容紧紧地坐在容器的左边缘，不管那是什么。控制按钮也是紧向左（定位绝对），但它有一些填充，使它看起来向内移位。
要么对内容应用填充，要么使用CSS来移动控件。
translateX()可以很好地工作。参见Carousel Controls Outside of Carousel。jfewjypa2#
我认为carousel-inner采用全宽度，并将项目向左对齐，因此使carousel-inner display-flex（d-flex），justify-content-center，align-item-center。如果没有单词，请尝试将其添加到carousel-item中。