我正在使用最新版本的 Bootstrap 4，我正在尝试让我的“列表组”响应。我一直在寻找不同的解决方案，但找不到任何可以适用于我的问题的解决方案。
我的“列表组”应该是一个选项卡，其内容显示在左侧。虽然在桌面上它运行完美，但它不是为移动设备设计的，并且在寻找解决方案时，我意识到在内容顶部显示的下拉菜单会起作用。我不知道如何在不破坏列表的情况下将我的列表“转换”为下拉列表。
这是现在的样子，所选选项卡的背景为红色，悬停时为不同的红色:list-group .我喜欢在移动 View 中将它移到内容的顶部，这样当我单击类别的标题时，我可以展开它的子菜单。
代码是这样的:
<div class="col-xl-3 ">
<div class="list-group list-group-flush" id="list-tab" role="tablist">
<h4> Lorem Ipsum </h4>
</br>
<a class="list-group-item list-group-item-action active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
<a class="list-group-item list-group-item-action" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
</br>
<h4> Mei ipsum neglegentur ex</h4>
</br>
<a class="list-group-item list-group-item-action" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
<a class="list-group-item list-group-item-action" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
</br>
<h4> Quo solum soleat</h4>
</br>
<a class="list-group-item list-group-item-action" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
<a class="list-group-item list-group-item-action" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
</div>
</div>
所以基本上当在手机/平板电脑等小屏幕上时，我的整个列表应该放在选项卡的顶部，将“h4”转换为下拉菜单，一旦点击它，它就会显示相应的元素。
也许只为小屏幕创建一个下拉菜单可以解决问题，但我不确定它是否可以被视为一个真正的解决方案，或者更像是一个糟糕的快捷方式。
最佳答案
将您的列表组转换为下拉列表非常简单。我们想要得到的结果类似于 dropdown menu with headers在文档中。
首先我们去掉 list-group-flush 和所有 list-group-item-action 类条目。接下来我们将 list-group 重命名为 dropdown:
<div class="col-xl-3 ">
<div class="dropdown" id="list-tab" role="tablist">
<h4> Lorem Ipsum </h4>
</br>
<a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
<a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
</br>
<h4> Mei ipsum neglegentur ex</h4>
</br>
<a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
<a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
</br>
<h4> Quo solum soleat</h4>
</br>
<a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
<a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
</div>
</div>
现在第一个 dropdown 或 class="dropdown" 需要变成 class="dropdown-menu show" 我们要向 h4 标题添加一个类，即:class="dropdown-header"。
<div class="col-xl-3 ">
<div class="dropdown-menu show" id="list-tab" role="tablist">
<h4 class="dropdown-header"> Lorem Ipsum </h4>
</br>
<a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
<a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
</br>
<h4 class="dropdown-header"> Mei ipsum neglegentur ex</h4>
</br>
<a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
<a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
</br>
<h4 class="dropdown-header"> Quo solum soleat</h4>
</br>
<a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
<a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
</div>
</div>
这就是列表组成为下拉菜单所需的全部更改，其余的可以保持原样。
nJoy!
关于html - 如何使用 Bootstrap 4 将列表组变成下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55200464/