如何使用 Bootstrap 5.1 正确嵌套列表组？答案

【问题标题】：How to correctly nest list-group with Bootstrap 5.1?如何使用 Bootstrap 5.1 正确嵌套列表组？
【发布时间】：2022-07-07 00:18:07
【问题描述】：

我正在尝试使用Bootstrap 5.1 list group component 创建多级列表组。

这就是我所做的

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<h2>Standard</h2>

<ul class="list-group">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item"><a href="/">Second</a>

    <ul class="list-group">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item"><a href="/">Level 2 - Second</a></li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

<h2 class="mt-5">With Flush</h2>

<ul class="list-group list-group-flush">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item"><a href="/">Second</a>

    <ul class="list-group list-group-flush">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item"><a href="/">Level 2 - Second</a></li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

正如您在上面的示例中看到的，列表组看起来不正确。如何修复嵌套列表组的外观？

更新在上面的标准示例中，我发现嵌套菜单存在间距问题。

在 Flush 示例中，底线在所有情况下都应与 with 相同，但嵌套级别应具有更大的缩进。

【问题讨论】：

具体是什么“看起来不对”？
第二层的菜单好像放不下
Bootstrap 没有嵌套列表组，在您的标准示例中看起来也不错
适合如何？我要求具体。 :)
@isherwood 我更新了问题

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

我不确定到底哪里不对，但如果是间距，只需使用一些 Bootstrap 的 spacing utilities 来修复它。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<h2>Standard</h2>

<ul class="list-group">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item"><a href="/">Second</a>

    <ul class="list-group mt-2">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item"><a href="/">Level 2 - Second</a></li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

<h2 class="mt-5">With Flush</h2>

<ul class="list-group list-group-flush">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item"><a href="/">Second</a>

    <ul class="list-group mt-2 list-group-flush">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item"><a href="/">Level 2 - Second</a></li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

【讨论】：