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

发布于 2025-02-13 10:49:16 字数 1950 浏览 1 评论 0原文

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

这是我所做的

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

如以上示例所示，列表组看起来不正确。如何修复嵌套列表组的外观？

更新在上面的标准示例中，我看到了嵌套菜单的间距问题。

在齐平示例中，底线应与所有情况相同，但是嵌套级别的凹痕应更大。

原文

I am trying to use Bootstrap 5.1 list group component to create multi-level list group.

Here is what I did

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

As you can see in the above example, the list group does not look right. How can I fix the nested list-group look?

Updated
In the Standard example above, I see spacing issues with the nested menu.

In the Flush example, the bottom line should be the same with in all cases, but the nested level should have a larger indentation.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娇柔作态 2025-02-20 10:49:16

您可以在下面使用自定义CSS来添加内部列表组的顶部和底部边距：

.list-group:not(.list-group-flush) .list-group-item .list-group{
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

否则，您可以使用间距实用程序来添加 margin 。只需在内部列表组中添加my-2。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 my-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>

You can use custom css below for add top and bottom margin of inner list group:

.list-group:not(.list-group-flush) .list-group-item .list-group{
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

Otherwise, You can use spacing utilities for add margin. Just add my-2 in inner list-group.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 my-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>

回复收藏 0 原文

~没有更多了~