Пользовательское дропменю boostrap 4

Question

Я хочу изменить дизайн выпадающего меню, но не могу понять, как мне этого добиться.

Я бы хотел, чтобы раскрывающееся меню отображалось в том же размере, что и контейнер. (см. скриншот ниже) Я пытался изменить класс выпадающего меню, добавив различные свойства, но ничего не работает У тебя есть идеи?

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>

Answer 1

В настоящее время .dropdown отображается с относительным позиционированием, в то время как .dropdown-menu отображается с абсолютным позиционированием с top: 100%;, так что меню отображается прямо под раскрывающимся раскрывающимся списком.

Если вы хотите иметь раскрывающееся меню на всю ширину, первое, что вам нужно изменить, это позиционирование .dropdown. Вы можете сбросить его так, чтобы раскрывающееся меню больше не располагалось абсолютно по отношению к его родителю, .dropdown, а из любого следующего, имеющего относительное расположение. В твоем случае это контейнер!

Поскольку .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/