Bootstrap 5 列表组Flush

Bootstrap 5提供了List Group Flush功能，其中的项目以列表的形式存储。列表组是一个灵活而强大的组件，用于显示一系列的内容。列表组平移功能是用来移除列表上的项目周围的边框和圆角。

列表组冲洗类：

list-group-flush。该类用于去除项目周围的边框和圆角。

语法:

<ul class="list-group list-group-flush">
      <li class="list-group-item">...</li>
      <li class="list-group-item">...</li>
</ul>

示例1：下面的代码演示了使用列表组冲洗属性的列表组冲洗。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>Bootstrap 5 List Group Flush</h2>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Hello</li>
        <li class="list-group-item">Geek</li>
        <li class="list-group-item">GeeksforGeeks</li>
    </ul>
</body>
  
</html>

输出:

Bootstrap 5 列表组冲洗

列表中的组别同花顺

示例2：下面的代码演示了使用列表组冲洗属性的嵌套列表组冲洗。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
  
    <h2>Bootstrap 5 Nested List Group using Flush</h2>
    <ul class="list-group">
        <li class="list-group-item">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">C++</li>
                <li class="list-group-item">C</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
        </li>
        <li class="list-group-item">Geek</li>
        <li class="list-group-item">GeeksforGeeks</li>
    </ul>
</body>
  
</html>

输出:

Bootstrap 5 列表组冲洗