网格布局

bootstrap5 网格

 

 

 

    <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>

<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>
    </div>

<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>

说明：col-3  表示一个占3列，默认总共12列

grid布局

 三等分宽度

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;