如何使用 Bootstrap 4 将列表组变成下拉菜单？

Question

我正在使用最新版本的 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”转换为下拉菜单，一旦点击它，它就会显示相应的项目。

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

Answer 1

将您的列表组转换为下拉列表非常简单。我们想要得到的结果类似于文档中的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>  

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

快乐！

Answer 2

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