<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<style>
.container {
max-width: 100%;
padding: var(--bs-gutter-x,.75rem);
font-size: .875rem;
}
.title {
width: 100%;
height: 2rem;
line-height: 2rem;
padding: 0 .5rem 0 .5rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.status {
height: 1.4rem;
margin-top: .3rem;
margin:auto
}
.offLineInit {
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%,0);
}
.p-3 {
padding: 0 !important;
}
.content{
position:relative;
height:8rem
}
</style>
<div class="container">
<div class="row g-3 ">
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-lg-3">
<div class="p-3 border box">
<div class="title">
<span>软树荫-701</span>
<img src="~/Content/img/assets/offline.png" class="status" />
<div style="display:inline-block;">
<button type="button" class="btn btn-light btn-sm">影像</button>
<button type="button" class="btn btn-light btn-sm">对讲</button>
</div>
</div>
<div class="content">
<i class="offLineInit">睡眠传感器离线</i>
</div>
</div>
</div>
</div>
</div>
说明：col-3 表示一个占3列，默认总共12列 标签：睡眠,离线,网格,701,传感器,bootstrap5,树荫,影像 From： https://www.cnblogs.com/ljingjing/p/16844800.html