- Bootstrap 教程
- Bootstrap - 首页
- Bootstrap - 概述
- Bootstrap - 环境设置
- Bootstrap - RTL(从右到左)
- Bootstrap - CSS 变量
- Bootstrap - 颜色模式
- Bootstrap 布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 间距
- Bootstrap - 实用工具
- Bootstrap - CSS 网格
- Bootstrap 组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 走马灯
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态框
- Bootstrap - 导航栏
- Bootstrap - 导航 & 标签页
- Bootstrap - 侧边栏
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 气泡提示
- Bootstrap - 进度条
- Bootstrap - 滚动监听
- Bootstrap - 加载动画
- Bootstrap - 提示框
- Bootstrap - 工具提示
- Bootstrap 表单
- Bootstrap - 表单
- Bootstrap - 表单控件
- Bootstrap - 选择框
- Bootstrap - 复选框 & 单选按钮
- Bootstrap - 滑块
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- Bootstrap - 表单验证
- Bootstrap 辅助类
- Bootstrap - 清除浮动
- Bootstrap - 颜色 & 背景
- Bootstrap - 彩色链接
- Bootstrap - 焦点环
- Bootstrap - 图标链接
- Bootstrap - 定位
- Bootstrap - 比例
- Bootstrap - 堆叠
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直线
- Bootstrap - 视觉隐藏
- Bootstrap 实用工具
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap - Flexbox
- Bootstrap - 浮动
- Bootstrap - 交互
- Bootstrap - 链接
- Bootstrap - 对象适配
- Bootstrap - 透明度
- Bootstrap - 溢出
- Bootstrap - 定位
- Bootstrap - 阴影
- Bootstrap - 大小
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- Bootstrap 演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 走马灯演示
- Bootstrap - 页眉演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄图演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态框演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - 特大标题演示
- Bootstrap - 粘性页脚演示
- Bootstrap - 相册演示
- Bootstrap - 登录演示
- Bootstrap - 定价演示
- Bootstrap - 结账演示
- Bootstrap - 产品演示
- Bootstrap - 封面演示
- Bootstrap - 仪表盘演示
- Bootstrap - 粘性页脚导航栏演示
- Bootstrap - 砌体布局演示
- Bootstrap - 模板启动器演示
- Bootstrap - RTL 相册演示
- Bootstrap - RTL 结账演示
- Bootstrap - RTL 走马灯演示
- Bootstrap - RTL 博客演示
- Bootstrap - RTL 仪表盘演示
- Bootstrap 有用资源
- Bootstrap - 问答
- Bootstrap - 快速指南
- Bootstrap - 有用资源
- Bootstrap - 讨论
Bootstrap - 列表组
列表组是用于显示一系列内容的有效组件。可以更改和扩展它们以支持任何内容。
基本项目
列表组是一个无序列表,包含列表项和合适的类。根据需要创建具有您自己的 CSS 的列表组。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html>
活动项目
要显示当前活动的选项,请将类.active添加到.list-group-item。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item">item 1</li> <li class="list-group-item active" aria-current="true">An active item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html>
禁用项目
要创建禁用的列表组,请将类.disabled添加到.list-group-item。一些带有.disabled的项目需要自定义 JavaScript 来完全禁用它们的点击事件。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item ">item 1</li> <li class="list-group-item ">item 2</li> <li class="list-group-item disabled" aria-disabled="true">A disabled item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html>
链接和按钮
通过添加.list-group-item-action,您可以使用<a>或<button>来创建具有悬停、禁用和活动状态的可操作列表组项目。
记住这里不要使用标准的.btn类。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action ">item 1</a> <a href="#" class="list-group-item list-group-item-action">item 2</a> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item 3</a> <a href="#" class="list-group-item list-group-item-action">item 4</a> <a class="list-group-item list-group-item-action disabled">item 5</a> </div> </body> </html>
您可以将disabled属性与<button>一起使用,而不是.disabled类。元素<a>不支持disabled属性。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action ">item 1</button> <button type="button" class="list-group-item list-group-item-action">item 2</button> <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button> <button type="button" class="list-group-item list-group-item-action">item 4</button> <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button> </div> </body> </html>
无边距
要在父容器(例如卡片)中边缘对齐显示列表组元素,请通过添加.list-group-flush来移除边框和圆角。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group list-group-flush"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </button> </body> </html>
编号
要选择编号的列表组项目,请添加.list-group-numbered修饰符类(并避免使用<ol>元素)。
<ol>上的counter-reset用于生成数字,然后使用counter-increment和content通过a::before伪元素对<li>进行样式化和放置。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ol class="list-group list-group-numbered"> <li class="list-group-item">Item One</li> <li class="list-group-item">Item Two</li> <li class="list-group-item">Item Three</li> </ol> </button> </body> </html>
正如下面所示,这些与自定义内容完美配合。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 1</div> Content of list item </div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 2</div> Content of list item </div> <span class="badge bg-primary rounded-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 3</div> Content of list item </div> <span class="badge bg-primary rounded-pill">8</span> </li> </ol> </button> </body> </html>
水平
通过添加类.list-group-horizontal,您可以将列表组项目的布局从所有断点的垂直方向修改为水平方向。
要从该断点的最小宽度开始创建水平列表组,请选择响应式变体.list-group-horizontal-{sm|md|lg|xl|xxl}。
不能将水平列表组与无边距列表组组合使用。
注意:如果要在水平方向上使列表组项目宽度相等,请向每个列表组项目添加类.flex-fill。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group list-group-horizontal"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-sm"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-md"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-lg"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-xl"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-xxl"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> </button> </body> </html>
变体
上下文类list-group-item-primary、list-group-item-secondary……等可用于使用状态背景和颜色设置列表元素的样式。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item">Default list group item</li> <li class="list-group-item list-group-item-primary">Primary list group item</li> <li class="list-group-item list-group-item-secondary">secondary list group item</li> <li class="list-group-item list-group-item-success">Success list group item</li> <li class="list-group-item list-group-item-danger">Danger list group item</li> <li class="list-group-item list-group-item-warning">Warning list group item</li> <li class="list-group-item list-group-item-info">Info list group item</li> <li class="list-group-item list-group-item-light">Light list group item</li> <li class="list-group-item list-group-item-dark">Dark list group item</li> </ul> </body> </html>
对于链接和按钮
您可以将上下文类与.list-group-item-action一起用于<a>和<button>元素。
应用.active状态以指示上下文列表组项目上的活动选择。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">item 1</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">item 2</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a> </div> </body> </html>
带徽章
通过使用某些实用工具,可以向任何列表组项目添加徽章以显示未读计数、活动等。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> item 1 <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> item 2 <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> item 3 <span class="badge bg-primary rounded-pill">1</span> </li> </ul> </body> </html>
自定义内容
使用Flexbox 实用工具,您几乎可以在其中添加任何HTML,即使对于链接的列表组也是如此,如下所示。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1"> Heading 1</h5> <small>3 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small>muted small print</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Heading 2</h5> <small class="text-body-secondary">2 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small class="text-body-secondary">muted small print</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Heading 3</h5> <small class="text-body-secondary">1 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small class="text-body-secondary">muted small print</small> </a> </div> </body> </html>
复选框和单选按钮
在列表组项目内添加 Bootstrap 的复选框和单选按钮,并根据需要自定义。您可以不用<label>,并且不要忘记包含aria-label属性和值以实现辅助功能。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"> <label class="form-check-label" for="firstCheckbox">Male</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"> <label class="form-check-label" for="secondCheckbox">Female</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"> <label class="form-check-label" for="thirdCheckbox">Other's</label> </li> </ul> </body> </html>
以下示例演示了单选按钮。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked> <label class="form-check-label" for="firstRadio">Male</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"> <label class="form-check-label" for="secondRadio">Female</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"> <label class="form-check-label" for="thirdRadio">Other's</label> </li> </ul> </body> </html>
要使整个列表组项目可点击,请在标签上使用.stretched-link样式。
示例
您可以使用“编辑和运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="list-group mt-2"> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1"> <label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label> </li> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2"> <label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label> </li> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3"> <label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label> </li> </ul> </body> </html>