如何在移动汉堡菜单中将引导程序 4 导航项元素彼此相邻放置？

Question

我正在尝试将 nav-item 元素放置在汉堡菜单中的移动视图上，彼此相邻。我对我的意思进行了 Photoshop（没有发布图片的声誉：/）：https://i.imgur.com/XUgZuQP.png

元素在移动设备上只能彼此相邻！

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container">
            <a class="navbar-brand" href="#">Amazing Website</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Products</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            My Products
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link " href="#">2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">2</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

在列表项的父元素上使用@media(max-width:767px) { display: flex; justify-content: space-between; }，就像这样 - https://codepen.io/bkdigital/pen/vYYBJJb

https://flexboxfroggy.com/ - 这是一个学习 flexbox 的有趣游戏

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp - 这是学习 bootstrap 4 flex 类

希望能帮到你！