Bootstrap Navbar 折叠成一个整洁的列表答案

【问题标题】：Bootstrap Navbar collapsing into a neat listBootstrap Navbar 折叠成一个整洁的列表
【发布时间】：2021-06-18 14:14:13
【问题描述】：

我正在尝试实现一个会折叠成堆栈的引导导航栏。我主要设法使它工作，但我对折叠菜单项的放置方式有一个小问题：

未折叠的菜单：

折叠的菜单，其中项目的放置很尴尬：

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu</title>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <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 mr-auto">
            <form class="form-inline my-2 my-lg-0">
                <li class="nav-item mr-sm-2">
                    <select class="custom-select" id ="first">
                        <option value="1">Menu entry 1</option>
                        <option value="0">Menu entry 2</option>
                        <option value="2">Menu entry 3</option>
                    </select>
                </li>
                <li class="nav-item mr-sm-2">
                    <select class="custom-select" id ="second">
                        <option value="a">Menu entry A</option>
                        <option value="b">Menu entry B</option>
                        <option value="c">Menu entry C</option>
                        <option value="d">Menu entry D</option>
                    </select>
                </li>
                <input class="form-control mr-sm-2" placeholder="min." aria-label="varMin" id="varMin" size="16">
                <input class="form-control mr-sm-2" placeholder="max." aria-label="varMax" id="varMax" size="16">
                <button class="btn btn-outline-success my-2 my-sm-0" id="envoyer" type="button">Envoyer</button>
            </form>
        </ul>
    </div>
</nav>
</body>

我怎样才能让菜单以垂直放置的方式显示每个菜单项的折叠方式（间距很小，类似于未折叠的水平菜单中的间距）？

【问题讨论】：

看起来有些东西被移动了——您的表单类在无序列表 (ul) 内，而列表项 (li) 在表单内。将表单类行、两个输入、按钮和表单关闭</form> 移动到</ul> 下方，它应该正常折叠。
非常感谢！虽然，我似乎无法让它工作......你介意吗，如果你有时间，发送一个包含解决方案的 pastebin 吗？或者，更好的是，写一个简短的答案，这样我就可以给你学分了:)

标签： twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

我将form-inline 部分移到了底部，并将列表项留在了列表中。

当菜单被下拉时，我还对较小屏幕的布局大小进行了一些调整。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
    @media (min-width:576px) {
        .navbar-nav, .form-inline {
            width: 30rem;
        }
    }

    @media (min-width:992px) {
        .navbar-nav, .form-inline {
            width: auto;
        }
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <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 mr-auto">
            <li class="nav-item my-2 my-lg-0 mr-lg-2">
                <select class="custom-select" id="first">
                    <option value="1">Menu entry 1</option>
                    <option value="0">Menu entry 2</option>
                    <option value="2">Menu entry 3</option>
                </select>
            </li>
            <li class="nav-item mr-lg-2">
                <select class="custom-select" id="second">
                    <option value="a">Menu entry A</option>
                    <option value="b">Menu entry B</option>
                    <option value="c">Menu entry C</option>
                    <option value="d">Menu entry D</option>
                </select>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-auto" placeholder="min." aria-label="varMin" id="varMin" size="16" style="width: 12rem;">
            <input class="form-control mr-auto" placeholder="max." aria-label="varMax" id="varMax" size="16" style="width: 12rem;">
            <button class="btn btn-outline-success my-2 my-lg-0" id="envoyer" type="button">Envoyer</button>
        </form>
    </div>
</nav>

【讨论】：