引导轮播边框在滑动期间扩展答案

【问题标题】：bootstrap carousel border expands during slide引导轮播边框在滑动期间扩展
【发布时间】：2022-02-12 01:54:23
【问题描述】：

我正在构建一个带有视频的 bootstrap5 轮播。视频有固定的宽度和高度，我在上面使用了 box-shadow。

问题在于，在每次幻灯片转换期间，box-shadow 都会扩展，就好像视频元素具有不同的高度/宽度一样。

我需要知道如何使 box-shadow 保持在完全相同的位置，这样我就不会出现这种混乱/错误的过渡：

sn-p:

.monkey-video {
    /* box-shadow: 0px 0px -60px -40px rgba(255, 255, 255, 0.35) inset; */
    width: 200;
    height: 240;
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<body class="bg-dark">
<section id="chars-section" class="position-relative" style="width: 100%;">
                <div class="d-flex flex-column justify-content-evenly align-items-center ">

                    <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>

                    <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
                        <div class="carousel-inner monkey-video">
                          <div id="0" class="carousel-item active">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Neandermonkey - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="1" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Medieval - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="2" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Futuro - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" 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="#carousel-monkeys" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                </div>
            </section>
            </body>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

问题是#carousel-monkeys 元素宽度在轮播项目过渡时扩展。您应该在 #carousel-monkeys 元素上设置一个固定的 with 以匹配视频宽度。试试这个：

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
         #carousel-monkeys {
         width: 200px;
         }
      </style>
   </head>
   <body class="bg-dark">
      <section id="chars-section" class="position-relative" style="width: 100%;">
         <div class="d-flex flex-column justify-content-evenly align-items-center ">
            <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>
            <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
               <div class="carousel-inner monkey-video">
                  <div id="0" class="carousel-item active">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="1" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="2" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
               </div>
               <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" 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="#carousel-monkeys" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
               </button>
            </div>
         </div>
      </section>
   </body>
</html>

【讨论】：

这不起作用，但实际上我设法通过在所有宽度和高度数字后添加“px”来解决它。不知道为什么它会起作用......