时间戳

首页 > 解决方案 > 自定义 dropmenu boostrap 4

twitter-bootstrap - 自定义 dropmenu boostrap 4

问题描述

我想更改下拉菜单的设计，但我不知道如何实现这一点。

我想让下拉菜单显示为与容器相同的大小。（见下面的截图）我试图修改下拉菜单类添加各种属性但没有任何效果你知道吗？

http://zupimages.net/up/19/26/93rj.png

我没有修改的代码很简单：

https://codepen.io/BigUsername/pen/zVzRjZ

片段：

body {
  background-color: #a3d5d3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="container position-relative">
                
                <div class="collapse navbar-collapse justify-content-end" id="mainMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown show">
                            <a class="dropdown-toggle nav-link" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style=".dropdown-toggle: :after {
    display: block;  };
    /* display: block; */
">Menu 1<i class="fal fa-chevron-down "></i>
                            </a>
                            <div class="dropdown-menu show" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Item 1</a>
                                <a class="dropdown-item" href="#">Item 2</a>
                                <a class="dropdown-item" href="#">Item 3</a>

                                <a class="dropdown-item" href="#">Item 4</a>
                                <a class="dropdown-item" href="#">Item 5</a>
                                <a class="dropdown-item" href="#">Item 6</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meu 2<i class="fal fa-chevron-down "></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Item 1</a>
                                <a class="dropdown-item" href="#">Item 2</a>
                                <a class="dropdown-item" href="#">Item 3</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 3<i class="fal fa-chevron-down "></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 4<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 5<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 6<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

<section class="blog">
        <div class="container">
            <p>Blablabla blablabla</p>
    </div></section>

标签： twitter-bootstrapdrop-down-menubootstrap-4

解决方案

目前.dropdown以相对定位显示，而.dropdown-menu以绝对定位显示，top: 100%;以便菜单显示在您单击的下拉菜单的正下方。

如果你想要一个全宽的下拉菜单，你首先需要改变的是.dropdown's 的位置。您可以重置它，以便下拉菜单不再绝对定位于其父级.dropdown，而是从具有相对定位的下一个。在你的情况下，它是容器！

由于仍显示为绝对宽度，因此您可以通过设置它的and.dropdown-menu轻松地将其设置为相对父级的全宽。left: 0;right: 0;

我不想弄乱Bootstrap默认样式。因此，我将介绍一个新的自定义 css 类.mega-menu，并将其添加到.dropdown.

布局

<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" />
        <div class="container position-relative">
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown show mega-menu">
                        <a class="dropdown-toggler" />
                        <div class="dropdown-menu">
                            <a class="dropdown-item" />
                            ...
                        </div>
                    </li>
                    <li class="nav-item dropdown mega-menu" />
                    <li class="nav-item dropdown" />
                    ...
                </ul>
            </div>
        </div>
    </nav>
</header>

CSS

.dropdown.mega-menu {
    position: static;
}

.dropdown.mega-menu .dropdown-menu {
    left: 0;
    right: 0;
}

结果

在此处输入图像描述

演示： https ://jsfiddle.net/davidliang2008/pL9jc7vt/13/

推荐阅读