Bootstrap 5 - 如何将 Mega Menu 定位在容器内

问题描述 投票：0回答：0

我在 Bootstrap 5 中有一个 MegaMenu 示例。

菜单位于左侧。由于 CSS

@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
}

我希望将 megamenu 限制在中心容器元素的边界内。我的示例 megamenu 在这里

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Load Bootstrap 5 from CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Load Bootstrap 5 JavaScript from CDN -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  <title>Bootstrap 5 MegaMenu Position Issue</title>
   
</head>
<body>
 

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
  <div class="container">
    <a class="navbar-brand" href="#">Bootstrap</a>
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-content">
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
       
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        
        <!-- Mega Menu -->
        <li class="nav-item dropdown dropdown-mega position-static " sytle="">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Megamenu</a>
          <div class="dropdown-menu shadow container">
            <div class="mega-content px-4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>No additional JS</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms &amp; Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>No Additional CSS</h5>
                    <div class="card">
                <img src="https://images.unsplash.com/photo-1509599589979-3b5a15d2816e?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NDR8fGZvcmVzdHxlbnwwfDB8fHwxNjM0OTkxMjA3&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=768" class="img-fluid" alt="image">
                <div class="card-body">
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
              </div>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 py-4">
                    <h5>Lot of Pages</h5>
                    <p>Lorem ipsum dolo sit achmet muhamed borlan de irtka.
                  </p></div>
                  <div class="col-12 col-sm-12 col-md-3 py-4">
                    <h5>Accomodation</h5>
                    <div class="list-group">
                      <a class="list-group-item" href="#">Accomodations</a>
                      <a class="list-group-item" href="#">Terms &amp; Conditions</a>
                      <a class="list-group-item" href="#">Privacy</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
      </ul>
      <form class="d-flex ms-auto">
          <div class="input-group">
              <input class="form-control border-0 mr-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-primary border-0" type="submit">Search</button>
          </div>
      </form>
    </div>
  </div>
</nav>

  <!-- Content -->
  <div class="container">
    <h1>Hello, world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>


</body>
</html>

菜单正在绝对定位，这就是为什么要定位在左边。当我将菜单定位更改为静态时，它会跳入导航本身。

我现在能做的最好的是设置左边：自动

@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    left: auto;
}

打开megamenu链接右边是设置megamenu

css twitter-bootstrap css-position bootstrap-5
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.