Html 如何使用Bootstrap 4将列表组转换为下拉菜单？

我正在使用Bootstrap4的最新版本，我正在努力使我的“列表组”响应。我一直在寻找不同的解决方案，但我找不到任何适合我的问题的方法

我的“列表组”应该是一个选项卡，其内容显示在左侧。虽然在桌面上它工作得很好，但它不是为移动设备设计的，而且在寻找解决方案时，我意识到在内容顶部显示的下拉菜单会起作用。我不知道如何在不破坏列表的情况下将列表“转换”为下拉列表

这就是它现在的外观，红色背景用于选定选项卡，而另一种红色用于悬停时：。当我在移动视图上时，我想将其移动到其内容的顶部，这样当我单击类别的标题时，我可以展开其子菜单

代码如下：

<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”转换为下拉菜单，单击后，它会显示相应的项目

---

也许只为小屏幕创建下拉菜单可以做到这一点，但我不确定这是否是一个真正的解决方案，或者更像是一个糟糕的快捷方式。

因为您的列表组div在大屏幕上覆盖了12列中的3列，为什么不尝试放置col-sm-12？

既然列表组div在大屏幕上覆盖了12列中的3列，为什么不尝试放置col-sm-12？

将列表组转换为下拉列表相当简单。我们希望得到的结果与文档中的类似

首先，我们去掉

列表组刷新

和所有

列表组项操作

类条目。接下来，我们将

列表组

重命名为

下拉列表

：

  <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>  

这就是列表组成为下拉菜单所需更改的全部内容，其余部分可以保持原样

---

哎呀

将列表组转换为下拉列表相当简单。我们希望得到的结果与文档中的类似

首先，我们去掉

列表组刷新

和所有

列表组项操作

类条目。接下来，我们将

列表组

重命名为

下拉列表

：

  <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>  

这就是列表组成为下拉菜单所需更改的全部内容，其余部分可以保持原样

---

哎呀

这是我问完这个问题后想到的第一件事。问题是结果并不像预期的那样好，因为列表有点长，移动用户在阅读所选内容之前必须滚动很多。我正在寻找一个更舒适的解决方案，比如折叠菜单，或者更好的手风琴。有两个不同的列表，一个用于台式机，一个用于小型设备，这是一个好主意吗？这是我问完这个问题后想到的第一件事。问题是结果并不像预期的那样好，因为列表有点长，移动用户在阅读所选内容之前必须滚动很多。我正在寻找一个更舒适的解决方案，比如折叠菜单，或者更好的手风琴。有两个不同的列表，一个用于桌面，另一个用于较小的设备，这是一个好主意吗？非常感谢您为此付出的努力！结果没有预期的那么吸引人，太令人失望了！列表太长了，不能这样保存，你认为我使用两个菜单是个好主意吗？一个用于桌面，另一个用于折叠菜单或手风琴（这样我可以同时打开一个折叠的项目）？我一直在寻找这样的解决方案，它们看起来很不错，尤其是手风琴。非常感谢您为此付出的努力！结果没有预期的那么吸引人，太令人失望了！列表太长了，不能这样保存，你认为我使用两个菜单是个好主意吗？一个用于桌面，另一个用于折叠菜单或手风琴（这样我可以同时打开一个折叠的项目）？我一直在寻找这样的解决方案，它们看起来很不错，尤其是手风琴。