高度 carosuel-item bootstrap 4.6

Question

我需要一些帮助来解决这个问题，Y 在 angular 14 上有这个组件，带有引导程序 v4.6：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100 d-sm-none" src="/assets/headers/unite-header-movil.png" alt="First slide">
        <img class="w-100 logo-header d-none d-sm-block" src="/assets/headers/Pokemon-Unite-main.webp">
        <div class="logo-unite-header row justify-content-center">
          <div class="col-5 col-sm-3 d-none d-sm-block">
              <img class="w-100 logo-header" src="/assets/headers/unite-logo.png">
          </div>
        </div>  
      </div>

      <div class="carousel-item">
        <img class="d-block w-100 d-sm-none" src="/assets/headers/header.jpg" alt="Second slide">
        <img class="d-none w-100 d-sm-block" src="/assets/headers/header-medium-up.jpg" alt="Second slide">
        <div class="logos-header row justify-content-center w-100 m-0">
            <div class="col-5 col-sm-3">
                <img class="w-100 logo-header" src="/assets/headers/pokemon-scarlet-logo-medium-up.webp">
            </div>
            <div class="col-5 col-sm-3">
                <img class="w-100 logo-header" src="/assets/headers/pokemon-violet-logo-medium-up.webp">
            </div>
        </div>
      </div>
      
    </div>
</div>

classes.logos-header 和.logo-unite-header 使用transform: translateY() 进行垂直翻译。

问题是包含它们的项目轮播设置为计算它们的高度，但我不希望这样（我希望项目轮播的高度是这些类的图像兄弟的高度）。

如果我设置高度：0 和溢出：可见，.item-carousel 的高度是好的，但里面的元素是不可见的。

帮助！ 先感谢您！

Answer 1

这真的很简单。

我只需要为这些行赋予绝对值。

锁定示例，只需要冷静的外观

.logos-header{
    transform: translateY(-150%);
    position: absolute;
}

@media (min-width: 576px) {
    .logos-header{
        transform: translateY(-100%);
        position: absolute;
    }

    .logo-unite-header{
        transform: translateY(-280%);
        position: absolute;
    }
}