【发布时间】：2021-10-22 01:13:57
【问题描述】：
我遇到的问题是，在 Flexbox 中使用 Bootstrap 5 Carousel 时，它在更改图像时宽度会加倍（并将其他弹性项目推到一边）。当直接容器设置为 display:block 但某些祖先元素是 flex 时，也会发生这种情况。
这是我的代码（轮播从https://getbootstrap.com/docs/5.0/components/carousel/复制）
<div id="midbody">
<Main class="carousel-container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
</svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
</svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</Main>
<div class="aside">
<div>
<h2>something </h2>
</div>
</div>
CSS：
#midbody {
margin: 20px auto;
width: $screen_width;
height: auto;
flex: 1 0 auto;
display: flex;
}
.carousel-container {
display: block;
}
我试过了：
- 按照此处的建议将溢出设置为隐藏Bootstrap carousel: images out of div when sliding
- 将轮播的容器更改为：flex: 0 1 auto;
我还没有发现任何重复的问题，所以我希望你能帮我解决这个问题。
【问题讨论】：
标签： css flexbox bootstrap-5