我正在使用最新版本的Bootstrap 4，并且试图使我的“列表组”响应。我一直在寻找不同的解决方案，但找不到任何可以解决我问题的方法。
我的“列表组”应该是一个标签，其内容显示在左侧。在台式机上，它工作得很好，但在移动设备上却不是很好的设计；在寻找解决方案时，我意识到，显示在内容顶部的下拉菜单是可行的。我不知道如何在不破坏列表的情况下将列表“转换”为下拉列表。
现在的样子，选定标签的背景为红色，悬停时为红色：list-group。在移动视图中，我希望将其移动到其内容的顶部，因此，当我单击类别的标题时，可以展开其子菜单。
代码是这样的：
<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”转换为下拉菜单，然后单击该菜单即可显示相应的项目。
也许只为小屏幕创建下拉菜单可以达到目的，但是我不确定是否可以将其视为真正的解决方案，或者更像是一个错误的快捷方式。
答案 0 :(得分：0)
既然您的列表组div在大屏幕上占据了12列中的3列，那么为什么不尝试将col-sm-12放在呢？
答案 1 :(得分：0)
将列表组转换为下拉列表非常简单。我们最终希望获得的结果类似于文档中的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"。 / p>
<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！