滚动条超出页面
Scrollbar extends past page
我有一个 bootstrap 列表组的滚动条。我使用 flexbox 让页面占据 100% 的视图，因为它将是一个单页网站。滚动条超出了视图，页面正在使用 html / body 滚动条。
我已经尝试过这些问题，但他们的答案没有用。
Page extends past edge of screen
How can I combine flexbox and vertical scroll in a full-height app?
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>
</body>
</html>
注意：该页面在小型设备上是隐藏的，因此您可能需要扩展布局。
您不需要所有的灵活性 类。将容器和行的高度设置为 h-100 (100%)，其余的应该可以工作：
html,
body {
height: 100%;
overflow: hidden;
}
.sideBar {
overflow-x: hidden;
overflow-y: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>
我有一个 bootstrap 列表组的滚动条。我使用 flexbox 让页面占据 100% 的视图，因为它将是一个单页网站。滚动条超出了视图，页面正在使用 html / body 滚动条。
我已经尝试过这些问题，但他们的答案没有用。
Page extends past edge of screen
How can I combine flexbox and vertical scroll in a full-height app?
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>
</body>
</html>
注意：该页面在小型设备上是隐藏的，因此您可能需要扩展布局。
您不需要所有的灵活性 类。将容器和行的高度设置为 h-100 (100%)，其余的应该可以工作：
html,
body {
height: 100%;
overflow: hidden;
}
.sideBar {
overflow-x: hidden;
overflow-y: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>