为什么我的导航栏在移动设备上没有响应？
Why is my navbar not responsive on mobile?
请帮助我。看看移动模式，我的崩溃汉堡菜单总是在右边隐藏得很远。这使网站看起来没有响应，我不知道如何修复它。我认为它一直有效，直到我添加了页脚，所以我将把它包含在代码中。
https://github.com/akashpandya/akashpandya.github.io -- 完整代码
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./css/line-icons.css">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
<div class="container">
<img class="navbar-brand" src="./images/logo.png" alt="" width="120" height="80" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-2">
<li>
<a class="nav-link active" href="#Home">Home</a>
</li>
<li>
<a class="nav-link" href="#About-Me">About Me</a>
</li>
<li>
<a class="nav-link" href="#Whats-new">Upcoming</a>
</li>
<li>
<a class="nav-link" href="">Manga</a>
</li>
<li>
<a class="nav-link" href="">Anime</a>
</li>
<li>
<a class="nav-link" href="">Movies</a>
</li>
<li>
<a class="nav-link" href="">TV Shows</a>
</li>
<li>
<a class="nav-link" href="">Novels</a>
</li>
<li>
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<footer class="py-4">
<div class="container">
<div class="row ">
<div class="col-md-6">
<p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
</div>
<div class="col-md-6 icons">
<a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
<a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
<a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
<a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
请在加载前检查天气 jquery 和 popper 是否已加载 bootstrap.min.js。
尝试以下
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
在index.html文件中关于部分和联系部分
data-aos="zoom-out-left" 和 data-aos="zoom-out-right" 无法正常工作
关于部分：
你可以试试这个
<section id="About-Me" style="width:100%;overflow:hidden;">
.........
.......
</section>
和联系部分：
你可以试试这个
<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
...........
...........
</section>
索引文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Try</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./css/line-icons.css">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
<div class="container-fluid">
<img class="navbar-brand mx-5" src="./images/logo.png" alt="" width="120" height="80" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-5">
<li>
<a class="nav-link active" href="#Home">Home</a>
</li>
<li>
<a class="nav-link" href="#About-Me">About Me</a>
</li>
<li>
<a class="nav-link" href="#Whats-new">Upcoming</a>
</li>
<li>
<a class="nav-link" href="">Manga</a>
</li>
<li>
<a class="nav-link" href="">Anime</a>
</li>
<li>
<a class="nav-link" href="">Movies</a>
</li>
<li>
<a class="nav-link" href="">TV Shows</a>
</li>
<li>
<a class="nav-link" href="">Novels</a>
</li>
<li>
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Hero -->
<section id="Home" class="bg-cover hero-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row">
<div class="col-12">
<h1 class="display-4" data-aos="zoom-in">My Hub For All Things Content</h1>
<p class="my-4" data-aos="fade-up">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Harum error reiciendis sapiente vero numquam doloremque!</p>
<a class="btn btn-main" data-aos="fade-up" href="">Click To Know More</a>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section id="About-Me" style="width:100%;overflow:hidden;">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 section-intro" data-aos="fade-up">
<h1>About Me</h1>
<div class="divider"></div>
<p data-aos="zoom-in">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae porro, est facere vel commodi itaque ratione veritatis corrupti quae atque quos, <br> totam quod perspiciatis numquam dolor deleniti! Excepturi, voluptatum!</p>
</div>
<div class="col-md-8 col-xs-12 intro-images">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-aos="zoom-out-left">
<div class="carousel-item active">
<img src="./images/img1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img4.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Offers -->
<section id="About-Me" class="text-center about">
<div class="container">
<div class="row">
<div class="col-12 section-about text-center" data-aos="fade-down">
<h1>What is this website for?</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="accordion" id="accordionExample" data-aos="fade-up">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima veniam, earum nobis esse suscipit delectus in eum? Repellendus, doloremque quidem amet quos perferendis labore provident ea quas facilis, reiciendis quam vel nemo cupiditate soluta temporibus veritatis sequi delectus, laborum autem!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis a officiis temporibus minima, qui nam odio magni dolor provident nulla illum sit, voluptatem quis cumque, sapiente impedit eligendi explicabo ullam ab iusto!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus incidunt laudantium nesciunt cupiditate, dolore mollitia officiis iste, eaque quibusdam doloremque dolorum assumenda. Est esse velit sit, blanditiis autem libero fugit recusandae eum explicabo sequi suscipit, aspernatur cumque exercitationem accusantium id. Necessitatibus!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Upcoming Video -->
<section id="Whats-new" class="bg-cover upcoming-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-in-right">
<h1>Most Anticipated Content</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
<a href="" class="video-btn"><img src="./images/play-regular-24.png" alt=""></a>
</div>
</div>
</div>
</section>
<!-- Current Watchlist -->
<section id="current" class="text-center">
<div class="container">
<div class="row">
<div class="col-12 section-current text-center" data-aos="zoom-in">
<h1>Current Watch List</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="watchlist" >
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img1.jpg" alt="">
<div class="icon"><i class="icon-tv"></i></div>
</div>
<h5 class="mt-5">Arcane</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-right">
<img src="./images/watch-list-img2.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">A Will Eternal</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img3.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">Hajime no Ippo</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
</div>
</div>
</section>
<!-- ContactUs -->
<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-out">
<h1>Get in Touch</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<form action="#" class="row g-4" data-aos="fade-up">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group col-md-12">
<textarea name="" id="" cols="30" rows="4" class="form-control" placeholder="Message"></textarea>
</div>
<div>
<button class="btn btn-main" type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-4">
<div class="container">
<div class="row ">
<div class="col-md-6">
<p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
</div>
<div class="col-md-6 icons">
<a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
<a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
<a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
<a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
</div>
</div>
</div>
</footer>
<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>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="app.js"></script>
</body>
</html>
将 overflow-hidden class 添加到这两个元素中应该可以解决您的问题。
请帮助我。看看移动模式，我的崩溃汉堡菜单总是在右边隐藏得很远。这使网站看起来没有响应，我不知道如何修复它。我认为它一直有效，直到我添加了页脚，所以我将把它包含在代码中。 https://github.com/akashpandya/akashpandya.github.io -- 完整代码
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./css/line-icons.css">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
<div class="container">
<img class="navbar-brand" src="./images/logo.png" alt="" width="120" height="80" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-2">
<li>
<a class="nav-link active" href="#Home">Home</a>
</li>
<li>
<a class="nav-link" href="#About-Me">About Me</a>
</li>
<li>
<a class="nav-link" href="#Whats-new">Upcoming</a>
</li>
<li>
<a class="nav-link" href="">Manga</a>
</li>
<li>
<a class="nav-link" href="">Anime</a>
</li>
<li>
<a class="nav-link" href="">Movies</a>
</li>
<li>
<a class="nav-link" href="">TV Shows</a>
</li>
<li>
<a class="nav-link" href="">Novels</a>
</li>
<li>
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<footer class="py-4">
<div class="container">
<div class="row ">
<div class="col-md-6">
<p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
</div>
<div class="col-md-6 icons">
<a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
<a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
<a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
<a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
请在加载前检查天气 jquery 和 popper 是否已加载 bootstrap.min.js。
尝试以下
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
在index.html文件中关于部分和联系部分
data-aos="zoom-out-left" 和 data-aos="zoom-out-right" 无法正常工作
关于部分：
你可以试试这个
<section id="About-Me" style="width:100%;overflow:hidden;">
.........
.......
</section>
和联系部分：
你可以试试这个
<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
...........
...........
</section>
索引文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Try</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./css/line-icons.css">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
<div class="container-fluid">
<img class="navbar-brand mx-5" src="./images/logo.png" alt="" width="120" height="80" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-5">
<li>
<a class="nav-link active" href="#Home">Home</a>
</li>
<li>
<a class="nav-link" href="#About-Me">About Me</a>
</li>
<li>
<a class="nav-link" href="#Whats-new">Upcoming</a>
</li>
<li>
<a class="nav-link" href="">Manga</a>
</li>
<li>
<a class="nav-link" href="">Anime</a>
</li>
<li>
<a class="nav-link" href="">Movies</a>
</li>
<li>
<a class="nav-link" href="">TV Shows</a>
</li>
<li>
<a class="nav-link" href="">Novels</a>
</li>
<li>
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Hero -->
<section id="Home" class="bg-cover hero-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row">
<div class="col-12">
<h1 class="display-4" data-aos="zoom-in">My Hub For All Things Content</h1>
<p class="my-4" data-aos="fade-up">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Harum error reiciendis sapiente vero numquam doloremque!</p>
<a class="btn btn-main" data-aos="fade-up" href="">Click To Know More</a>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section id="About-Me" style="width:100%;overflow:hidden;">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 section-intro" data-aos="fade-up">
<h1>About Me</h1>
<div class="divider"></div>
<p data-aos="zoom-in">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae porro, est facere vel commodi itaque ratione veritatis corrupti quae atque quos, <br> totam quod perspiciatis numquam dolor deleniti! Excepturi, voluptatum!</p>
</div>
<div class="col-md-8 col-xs-12 intro-images">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-aos="zoom-out-left">
<div class="carousel-item active">
<img src="./images/img1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img4.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Offers -->
<section id="About-Me" class="text-center about">
<div class="container">
<div class="row">
<div class="col-12 section-about text-center" data-aos="fade-down">
<h1>What is this website for?</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="accordion" id="accordionExample" data-aos="fade-up">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima veniam, earum nobis esse suscipit delectus in eum? Repellendus, doloremque quidem amet quos perferendis labore provident ea quas facilis, reiciendis quam vel nemo cupiditate soluta temporibus veritatis sequi delectus, laborum autem!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis a officiis temporibus minima, qui nam odio magni dolor provident nulla illum sit, voluptatem quis cumque, sapiente impedit eligendi explicabo ullam ab iusto!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus incidunt laudantium nesciunt cupiditate, dolore mollitia officiis iste, eaque quibusdam doloremque dolorum assumenda. Est esse velit sit, blanditiis autem libero fugit recusandae eum explicabo sequi suscipit, aspernatur cumque exercitationem accusantium id. Necessitatibus!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Upcoming Video -->
<section id="Whats-new" class="bg-cover upcoming-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-in-right">
<h1>Most Anticipated Content</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
<a href="" class="video-btn"><img src="./images/play-regular-24.png" alt=""></a>
</div>
</div>
</div>
</section>
<!-- Current Watchlist -->
<section id="current" class="text-center">
<div class="container">
<div class="row">
<div class="col-12 section-current text-center" data-aos="zoom-in">
<h1>Current Watch List</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="watchlist" >
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img1.jpg" alt="">
<div class="icon"><i class="icon-tv"></i></div>
</div>
<h5 class="mt-5">Arcane</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-right">
<img src="./images/watch-list-img2.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">A Will Eternal</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img3.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">Hajime no Ippo</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
</div>
</div>
</section>
<!-- ContactUs -->
<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-out">
<h1>Get in Touch</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<form action="#" class="row g-4" data-aos="fade-up">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group col-md-12">
<textarea name="" id="" cols="30" rows="4" class="form-control" placeholder="Message"></textarea>
</div>
<div>
<button class="btn btn-main" type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-4">
<div class="container">
<div class="row ">
<div class="col-md-6">
<p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
</div>
<div class="col-md-6 icons">
<a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
<a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
<a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
<a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
</div>
</div>
</div>
</footer>
<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>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="app.js"></script>
</body>
</html>
将 overflow-hidden class 添加到这两个元素中应该可以解决您的问题。