如何更改 Bootstrap 中下拉菜单的 position？ 我尝试使用 data-offset 或 data-reference 但它们没有用

Question

我的下拉菜单从页面左侧开始，其 position 与列表项无关。

<div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container justify-content-between">
                <a class="navbar-brand" href="#">ARARAT</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav  dropdown-menu-end mx-auto">
                        <li class="nav-item active">
                            <a class="nav-link py-3 px-3" href="#" data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-3 px-3" href="#" data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-3 px-3" href="#" data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show">Products</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-3 px-3" href="#" data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link dropdown-toggle py-3 px-3" href="#" id="navbarDropdownMenuLink"
                                role="button" data-bs-toggle="dropdown" aria-expanded="true">Blog</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">d1</a></li>
                                <li><a class="dropdown-item" href="#">d2</a></li>
                                <li><a class="dropdown-item" href="#">d3</a></li>
                                <li><a class="dropdown-item" href="#">d4</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link dropdown-toggle py-3 px-3" href="#" id="navbarDropdownMenuLink"
                                role="button" data-bs-toggle="dropdown" aria-expanded="true">Pages</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">P1</a></li>
                                <li><a class="dropdown-item" href="#">P2</a></li>
                                <li><a class="dropdown-item" href="#">P3</a></li>
                                <li><a class="dropdown-item" href="#">P4</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-3 px-3" href="#" data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show">Contact</a>
                        </li>

                    </ul>
                    <button class="btn bg-transparent fs-6 PX-5 PY-5" type="submit">GET IN TOUCH</button>
                </div>
            </div>
        </nav>
    </div>

在这里，我附上了我得到的结果的照片......我希望（P1，P2，......）的列表位于“页面”列表项下。 谢谢

Answer 1

我认为为什么您的页面下拉菜单不起作用是因为您为两个下拉菜单提供了相同的 ID。

id="navbarDropdownMenuLink"

尝试更改其中一个下拉列表的 ID。 请记住，如果两个 Bootstrap 下拉菜单具有相同的 id 和 aria-labelledby 值，则第一个下拉菜单将正确为 function 但第二个下拉菜单将无法按预期工作。