Bootstrap 4全屏轮播错误：标题以延迟为中心

Question

我正在使用全屏Bootstrap 4轮播。幻灯片不包含图片，但视频和字幕。

它出来很好但它确实有一个错误：因为所有幻灯片但活动的有display: none（一个Bootstrap 4 默认），所以幻灯片中的字幕延迟，如下所示。

＆＃13;

＆＃13;

html,body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
#full_slider .carousel-item {
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#full_slider .carousel-item.active {
  display: flex;
  position: relative;
}
#full_slider video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
  z-index: -1;
}
#full_slider .video-caption {
  max-width: 585px;
  color: #fff;
}
#full_slider h3 {
  font-weight: 900;
  font-size: 96px;
  text-shadow: 2px 1px 1px rgba(0, 0, 0 , 0.6)
}
#full_slider .allcases a {
  color: #fff;
  margin-top: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">All about us</h3>
          <p class="allcases">
            <a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Lorem ipsum dolor</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/wittgenstein.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Wittgenstein's philosophy</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#full_slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
    <a class="carousel-control-next" href="#full_slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我不能只将旋转木马项目的显示设置为阻止，因为这会破坏滑块。

我该怎么做？

Answer 1

尝试添加CSS规则：

.carousel-item.active, .carousel-item-left, .carousel-item-right {
  display: flex !important;
}

问题似乎来自于这样一个事实，即在动画期间，display: flex未设置在轮播项目容器上，但这是正确对齐孩子所必需的。

工作片段：

html,body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
#full_slider .carousel-item {
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#full_slider .carousel-item.active {
  display: flex;
  position: relative;
}
#full_slider video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
  z-index: -1;
}
#full_slider .video-caption {
  max-width: 585px;
  color: #fff;
}
#full_slider h3 {
  font-weight: 900;
  font-size: 96px;
  text-shadow: 2px 1px 1px rgba(0, 0, 0 , 0.6)
}
#full_slider .allcases a {
  color: #fff;
  margin-top: auto;
}


.carousel-item.active, .carousel-item-left, .carousel-item-right {
  display: flex !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">All about us</h3>
          <p class="allcases">
            <a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Lorem ipsum dolor</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/wittgenstein.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Wittgenstein's philosophy</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#full_slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
    <a class="carousel-control-next" href="#full_slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  </div>
</div>