BootStrap 轮播自行调整大小

Question

我对网页设计还很陌生，我正在尝试制作一个带有 BootStrap 轮播的网站，但它对我来说表现得很奇怪，我不明白为什么。我从 BootStrap 5.1 carousel 文档页面复制了代码。

旋转木马最初工作得很好，但是当幻灯片变为活动状态并获得 .active class 时，它会将自身调整为一半大小，我不知道为什么。当我尝试更改 .carousel .active{} class CSS 以固定宽度时，它就消失了。我不明白发生了什么，非常感谢任何帮助。

P.S。我的 JavaScript 应该做的唯一一件事就是使用 InterSectionObserver API 在一条线进入视图时对其进行动画处理，但它不起作用。我认为它对网页的其余部分没有任何影响

/*const line = $('.small-line-header');

const options = {};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    console.log(entry);
  });
}, options);

observer.observe(line);*/

/* font-family: 'Nunito', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Staatliches', cursive; */
/* HTML Section */
body {
  font-family: 'Roboto', sans-serif;
  text-align: left;
  background-color: black;
}

h1 {
  font-family: 'Staatliches', cursive;
  font-size: 8rem;
  color: white;
}

h3 {
  font-family: 'Staatliches', cursive;
  font-size: 6rem;
  color: black;
}

h2 {
  font-family: 'Staatliches', cursive;
  color: white;
  font-size: 5rem;
}

h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  color: white;
  font-weight: 500;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  color: black;
  font-weight: 700;
}

/* NavBar Section */
.navbar {
  padding-bottom: 5vh;
  padding-top: 5vh;
}

.navbar-brand {
  font-family: 'Staatliches', cursive;
  font-weight: 900;
  font-size: 1.8rem;
  padding-left: 1.5vw;
}

.nav-item {
  font-family: 'Staatliches', cursive;
  font-size: 1rem;
  padding: 0 1.5vw;
}

.nav-link {
  font-weight: normal;
  font-size: 1rem;
}

/* Title Section */
.container-fluid {
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 15%;
}

.container-header {
  padding-top: 8%;
  padding-left: 5%;
  padding-right: 10%;
  text-align: right;
}

.container-title-text {
  padding-left: 20%;
  padding-top: 3%;
}

.big-line {
  height: 3vh;
  width: 0vw;
  background: white;
  animation-name: big-line-anim;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  margin-top: 1%;
  margin-bottom: 2%;
}

.small-line {
  height: 2vh;
  width: 0vw;
  background: white;
  animation-name: small-line-anim;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 0.3s;
  margin-top: 2%;
  margin-bottom: 14%;
}

.small-line-header {
  position: absolute;
  height: 3vh;
  right: 0;
  width: 50%;
  background: black;
}

.active{
  animation-name: small-line-anim-header;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

.about-me-text{
  padding-top: 20%;
  padding-left: 10%;
  padding-right: 40%;
  padding-bottom: 15%;
}

.projects{
  padding-top: 10%;
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 10%;
  text-align: center;
}

.carousel-item{
  height: 80vh;
  background: red;
  width: 100%;
}

.carousel{
  text-align: center;
}

.carousel .active{
  background: green;
  text-align: center;
}

/* Section classes */
#title {
  text-align: left;
  height: 100%;
  width: 100%;
}

#about-me {
  background-color: white;
  height: 100%;
  width: 100%;
}

#my-projects {
  background-color: black;
  height: 100%;
  width: 100%;
}

/* Animation Section */
@keyframes big-line-anim {
  0% {
    width: 0%;
  }

  100% {
    width: 80%;
  }
}

@keyframes small-line-anim {
  0% {
    width: 0%;
  }

  100% {
    width: 65%;
  }
}

@keyframes small-line-anim-header {
  0% {
    width: 20%;
  }

  100% {
    width: 50%;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Hello!</title>

  <!-- BootStrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito&family=Roboto:ital,wght@0,400;1,700&family=Staatliches&display=swap" rel="stylesheet">

  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="index.js" charset="utf-8"></script>

</head>

<body>

  <section id="title">

    <div class="container-fluid">

      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
        <a class="navbar-brand" href="#">Quick Select</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#about-me">Here's Me!</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#my-projects">My Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">Contact me</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <div class="container-title-text">
      <h1>My Name</h1>
    </div>
    <div class="big-line">
    </div>
    <div class="small-line">
    </div>
  </section>

  <section id="about-me">
    <div class="container-header">
      <h3>About me</h3>
    </div>
    <div class="small-line-header">
    </div>
    <div class="about-me-text">
      <p>The quick brown fox jumps over the lazy dog. Something something Lorem Ipsum.</p>
    </div>
  </section>

  <section id="my-projects">
    <div class="projects">
      <h2>My Projects</h2>
    </div>
    <div class="projects">
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

此外，我看到我的第一部分出于某种原因根本没有出现在片段和 JSFiddle 中，但它确实出现在我这边。它看起来像这样：

我不知道为什么它没有出现在代码片段中。任何帮助是极大的赞赏。谢谢！

Answer 1

这可能是因为您将活动动画的宽度设置为 50% class。

@keyframes small-line-anim-header {
  0% {
    width: 20%;
  }

  100% {
    width: 50%;
  }
}

BootStrap 轮播自行调整大小

BootStrap Carousel resizing itself

html

css

bootstrap-4