1. Toy模板网首页
  2. > Toy博客

Bootstrap4 之栅格系统

10月前 作者：BinaryMoon 分类：Toy博客 阅读(25) 违法举报

这篇具有很好参考价值的文章主要介绍了Bootstrap4 之栅格系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考

项目 描述
Bootstrap 入门经典 珍妮弗、凯瑞恩
Bootstrap 基础教程 赵丙秀
Bootstrap 官方文档
哔哩哔哩 Bootstrap4 从入门到实战

描述

项目 描述
操作系统 Windows 10 专业版
Edge 109.0.1518.55 (正式版本) (64 位)
Bootstrap 4.4.1

栅格系统（网格系统）

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着视口（浏览器的可视区域）尺寸的增加，系统会分为最多 12 列。
Bootstrap 默认的栅格系统平分为最多 12 份，在使用的时候可以根据具体情况通过重新编译 Less 源码来修改这个数值。12 列栅格系统是整个 Bootstrap 的核心功能，也是响应式设计核心理念的一个实现形式。

原理

栅格系统实现的原理非常简单，仅仅是通过定义容器大小，平分为 12 份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式栅格系统。

容器

网格中的每一行都需要安排在设置了 .container 或 .container-fluid 类的容器中，这些容器具有 Bootstrap 预设的样式，能够为其中的列提供适当的支持（内边距等样式）以更好的对页面进行布局。
.container 创建一个具有固定宽度（不同的视口范围对应不同的容器宽度）的容器，而 .container-fluid 将创建一个宽度时刻与视口宽度相等的容器。

这是使用 .container 类创建的容器：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

这是使用 .container-fluid 创建的容器：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

.container 与视口宽度

不同的视口范围将对应不同的最大容器（应用 .container 的容器）宽度，具体规则如下：

范围 容器宽度
viewport < 768px .container 将使用视口宽度，此时的效果与 .container-fluid 容器相同。
768px <= viewport < 993px 750px
992px <= viewport < 1200px 970px
viewport >= 1200px 1170px

行

在栅格系统中，使用行在容器内部创建一组列。行需要包含于 .container 中，以便为其赋予适合的对齐方式及内边距。

列

在栅格系统中，你需要向网页中添加的内容（文本，图片等）可以放置在列中；在栅格系统中，仅有列可以作为行的直接子元素。

样式

栅格系统中存在 Bootstrap 提供的默认样式：

  1. .column 的左右均存在 15px 的内边距，可以防止列中的内容紧挨着浏览器的边缘。
  2. .container 中同样也存在 15px 的内边距。
    .row（行） 是 .col--（列） 的容器，行的左右各有 -15px 的外边距用以抵消 .container 容器产生的 15px 的内边距。
    .container 是为了模拟 .column 产生的 15px 的内边距。这样设计的好处是可以使 列 中再包含 行 （此时，列与行的关系就相当于最开始时容器与行的关系）后无需做出其他改动依然能维持原有的样式风格。

栅格等级

不同的响应尺寸（视口宽度）对应不同的栅格等级。

Extra Small Small Medium Large Extra Large
中译 超小屏幕 小屏幕 中等屏幕 大屏幕 超大屏幕
响应尺寸 < 576px >= 576px >= 768px >= 992 >= 1200
最大容器宽度 Auto 540px 720px 960px 1140px
列宽 Auto 45px 60px 80px 95px
列数 12 12 12 12 12
适用于 特小手机 智能手机 平板电脑 手提电脑 笔记本电脑
类前缀 .col-* .col-sm-* .col-md-* .col-lg-* .col-xl-*

网格

宽度

你可以通过指定类前缀中的 * 为一个 1~12 范围内的数值，用以指定响应尺寸在对应的栅格等级，该网格所占据的列数。

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

例如，如下代码将在一行中创建三个网格，这三个网格将存在如下特点：

  1. 在中等屏幕及以上时，每一个网格将占据 4 列。
  2. 在小屏幕时，每一个网格将占据 3 列。
  3. 在超小屏幕时，每一个网格均占据 12 列，这是默认设置，你也可以指定类前缀 .col-* 中的 * 为一个 1~12 范围内的数值，用以指定在该响应尺寸下时，该网格所占据的列数。
<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <!-- 导入 bootstrap.css 请将该样式表在其他样式表之前进行导入 -->
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 为 行 设置样式 */
        .row div{
            /* 行的高度 */
            height: 40px;
            /* 行内文字居中对齐 */
            text-align: center;
            line-height: 40px;
            /* 字体宽度 */
            font-weight: 600;
            /* 行内文字的颜色 */
            color: #fff;
        }

        /* 选中行中排位为奇数的列并为其指定背景颜色 */
        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        /* 选中行中排位为奇数的列并为其指定背景颜色 */
        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <!-- 创建容器 -->
    <div class="container">
        <!-- 创建行 -->
        <div class="row">
            <!-- 创建网格 -->
            <div class="col-md-4 col-sm-3">One</div>
            <div class="col-md-4 col-sm-3">Two</div>
            <div class="col-md-4 col-sm-3">Three</div>
        </div>
    </div>
    
    <!-- 使用 Bootstrap4 时，你需要导入 Jquery、Popper 以及 bootstrap -->
    <!-- 请不要将导入顺序进行颠倒 -->
    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

特点
左对齐

如果网格所占据的总列数小于 12 列但大于 0 列，那么网格没有占据的列将不会出现任何内容；由于存在空白的列，网格整体将左对齐。

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 600;
            color: #fff;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">

        <div class="row">
            <!-- 网格总宽度为 9 列，没有占满 12 列 -->
            <div class="col-sm-3">One</div>
            <div class="col-sm-3">Two</div>
            <div class="col-sm-3">Three</div>
        </div>

        <div class="row">
            <!-- 占据所有的列，与第 1 行形成对比 -->
            <div class="col-sm-4">One</div>
            <div class="col-sm-4">Two</div>
            <div class="col-sm-4">Three</div>
        </div>
    </div>
    
    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

另起一行
  1. 第一种情况
    如果网格所占据的列数超过 12 列，则多出部分的网格将分散到其他行中 （ 如果多出的网格整体（上一行多出的所有网格）放入下一行后，网格所占据的总列数仍超过 12 列，则多出部分的网格将继续放入下一行，以此类推。） ，直到装下所有网格。
<div class="row">
    <!-- 网格总宽度为 9 列，没有占满 12 列 -->
    <div class="col-sm-4">One</div>
    <div class="col-sm-4">Two</div>
    <div class="col-sm-8">Three</div>
</div>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

  1. 第二种情况
    如果单个网格的列数超过 12 列：

    • 若该网格中含有内容

      • 网格的宽度将为盛放内容所需要的最小宽度，网格的高度将为行高（默认）。
      <div class="row">
	<div class="col-sm-4">One</div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-36">Three</div>
</div>

      bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

      • 若网格中的内容或所占据的列的宽度超过当前行的剩余宽度（从当前网格的头部开始计算），则该网格将被移动到下一行（视觉上的下一行）中。
      <div class="row">
	<div class="col-sm-4">One</div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-8">Three</div>
</div>

      bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

      • 若网格中的内容或所占据的列的宽度超过容器宽度，则该网格将在下一行（视觉上的下一行）中展示且网格中多出容器的内容将会消失。
      <div class="row">
	<div class="col-sm-4"></div>
	<div class="col-sm-4">Two</div>
	<!-- 此网格中的内容随机产生，请勿多疑 -->
	<div class="col-sm-36">撒旦解放了就是浪费精力时间发链接十六分但是垃圾费垃圾费的实力解放螺丝钉解放分开发了数据分离技术垃圾分类收集了房间是浪费精力的设计费陆军第十六飞这里是超出部分</div>
</div>

      bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

    • 若该网格中不含有内容，则该网格将会消失。

    <div class="row">
 	<div class="col-sm-4"></div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-36"></div>
</div>

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

自适应

如果你没有为列 col-- 中的第二个 * 指定一个值（该网格所占据的列数），则 Bootstrap 将会将当前容器的宽度平均分配到每一个网格中。

<div class="container">
    <div class="row">
        <div class="col-sm">One</div>
        <div class="col-sm">Two</div>
        <div class="col-sm">Three</div>
    </div>

    <div class="row">
        <div class="col-sm">One</div>
        <div class="col-sm">Two</div>
        <div class="col-sm">Three</div>
        <div class="col-sm">Four</div>
    </div>
</div>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

布局

对齐

垂直对齐
行

使用如下类可以指定行在容器中的对齐方式。

项目 描述
.align-items-start 顶部对齐（默认）
.align-items-center 居中对齐
.align-items-end 尾部对齐

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 设置行的样式 */
         .row{
            height: 120px;
            /* 为行设置边框，方便后续观察网格的对齐方式 */
            border: 1px solid aqua;
            /* 设置行的底边距为 15px */
            margin-bottom: 15px;
        }

        /* 设置行中的网格的样式 */
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 顶部对齐 -->
        <div class="row">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <!-- 居中对齐 -->
    <div class="container">
        <div class="row align-items-center">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <!-- 尾部对齐 -->
    <div class="container">
        <div class="row align-items-end">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

列
项目 描述
.align-self-start 顶部对齐（默认）
.align-self-center 居中对齐
.align-self-end 尾部对齐

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 设置行的样式 */
         .row{
            height: 120px;
            /* 为行设置边框，方便后续观察网格的对齐方式 */
            border: 1px solid aqua;
            /* 设置行的底边距为 15px */
            margin-bottom: 15px;
        }

        /* 设置行中的网格的样式 */
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 顶部对齐 -->
        <div class="row">
            <div class="col-sm">One</div>
            <div class="col-sm align-self-center">Two</div>
            <div class="col-sm align-self-end">Three</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

水平对齐
项目 描述
.justify-content-start 左对齐（默认）
.justify-content-center 居中对齐
.justify-content-end 右对齐
.justify-content-around 网格两边的边距是相等的，因此中间的网格间的距离会是两边靠容器边缘的边距的两倍
.justify-content-between 两端的网格紧靠容器边缘，中间的网格之间的距离相等

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 左对齐 -->
        <div class="row">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- 居中对齐 -->
        <div class="row justify-content-center">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- 右对齐 -->
        <div class="row justify-content-end">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- .justify-content-around -->
        <div class="row justify-content-around">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- .justify-content-between -->
        <div class="row justify-content-between">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

排列

项目 描述
.order-N 你可以通过为列添加该类以调节列在该行中的顺序，N 的取值范围为 1~12 。
.order-first 使用该类的列将被排在当前行（.row）的第一位。
.order-last 使用该类的列将被排在当前行（.row）的最后一位。
响应式

由于 Bootstrap 是响应式的开发框架，所以你可以通过为上述类添加 sm、md、lg 以及 xl 中缀来实现网格在不同响应尺寸下网格以指定的排列顺序进行排列。

举个栗子：

如下示例中，第一个以及第四个网格将在栅格等级在 sm（包括）~xl 间互换位置，并在栅格等级为 xl 时恢复原位置。

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 order-sm-last order-xl-first">One</div>
            <div class="col-sm-3 order-2">Two</div>
            <div class="col-sm-3 order-3">Three</div>
            <div class="col-sm-3 order-sm-last order-xl-last">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

优先级

如果你没有通过 order-*-N 为一行中的所有的列指定顺序，则通过 order-*-N 指定顺序的列将排列在没有指定顺序的列之后。

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 order-3">One</div>
            <div class="col-sm-3">Two</div>
            <div class="col-sm-3">Three</div>
            <div class="col-sm-3 order-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

偏移

项目 描述
.offset-N 你可以通过为列添加该类以调节列在该行中向 右 的偏移量，N 的取值范围为 1~11 。

注：

由于 Bootstrap 是响应式的开发框架，所以你可以通过为上述类添加 sm、md、lg 以及 xl 中缀来实现网格在不同响应尺寸下网格以指定的跨度（偏移的列数）进行偏移。

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2 offset-4">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI

显隐

在进行页面布局时，为了实现响应式的需求以及网页的美观性：
在视口缩小时往往需要隐藏部分内容以避免页面过长影响体验；
在视口放大时往往需要显示部分内容以避免页面太过空旷影响美观。

类 描述
.d-none 隐藏当前行中的所有网格。
.d-block 显示当前行中的所有网格。
.d-none .d-sm-block 仅在响应尺寸对应的栅格等级为 xs 时隐藏。
.d-none .d-md-block 仅在栅格等级为 xs 及 sm 时隐藏。
.d-none .d-lg-block 仅在栅格等级为 xs、sm 及 md 时隐藏。
.d-none .d-xl-block 仅在栅格等级为 xs、sm、md 及 lg 时隐藏。
.d-block .d-sm-none 仅在响应尺寸对应的栅格等级为 xs 时显示。
.d-block .d-md-none 仅在栅格等级为 xs 及 sm 时显示。
.d-block .d-lg-none 仅在栅格等级为 xs、sm 及 md 时显示。
.d-block .d-xl-none 仅在栅格等级为 xs、sm、md 及 lg 时显示。

举个栗子：

<!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, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 d-none d-sm-block">One</div>
            <div class="col-sm-3 d-none d-md-block">Two</div>
            <div class="col-sm-3 d-none d-lg-block">Three</div>
            <div class="col-sm-3 d-none d-xl-block">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

bootstrap用文本框来实现如图的格栅系统,前端,bootstrap,前端,框架,基础,UI文章来源地址https://www.toymoban.com/news/detail-810734.html

到了这里，关于Bootstrap4 之栅格系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 基于Springboot+Bootstrap的前后端分离的美食推荐系统

    基于Springboot+Bootstrap的前后端分离的美食推荐系统

    ✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅 文末获取项目下载方式 🍅 源码下载请关注底部官方网站信息或联系方式 一、项目背景介绍： 随着

    2024年02月12日
    浏览(37)
  • 基于ASP.NET MVC + Bootstrap的仓库管理系统

    基于ASP.NET MVC + Bootstrap的仓库管理系统

    基于ASP.NET MVC + Bootstrap的仓库管理系统。源码亲测可用，含有简单的说明文档。 适合单仓库，基本的仓库入库管理，出库管理，盘点，报损，移库，库位等管理，有着可视化图表。 系统采用Bootstrap 开发，UI 相对比较简单，业务功能不复杂，适合广大开发者。 主要包含功能如

    2024年02月06日
    浏览(43)
  • 基于Flask+Bootstrap+机器学习的世界杯比赛预测系统

    基于Flask+Bootstrap+机器学习的世界杯比赛预测系统

    🤵‍♂️ 个人主页：@艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 一、项目介绍 1.1项目简介 1.2技术工具 1.3页面概述  二、项目步骤 2.1首页模块 2.2查看

    2024年02月09日
    浏览(48)
  • IDEA+SpringBoot + Mybatis + Shiro+Bootstrap+Mysql智慧仓库系统

    IDEA+SpringBoot + Mybatis + Shiro+Bootstrap+Mysql智慧仓库系统

    本系统实现了智慧仓库系统源码，管理端实现了管理员登录、 主页、货位一览、入库单、库存明细、呆滞过期报表、转库记录、入库记录、出库记录、出库单、物料信息、仓库设置、用户管理、操作员管理、角色管理、账户别名、服务地址、子库管理、计划时间、菜单管理、

    2024年02月15日
    浏览(44)
  • 基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统

    基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统

    🤵‍♂️ 个人主页：@艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 一、项目介绍 1.1项目简介 1.2技术工具 1.3页面概述  二、项目步骤 2.1登录模块 2.2注册

    2024年02月02日
    浏览(38)
  • Vue--》搭配Bootstrap实现Vue的列表增删功能

    Vue--》搭配Bootstrap实现Vue的列表增删功能

    在日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间。 当我们想要生成表单表格时我们可以查看Bootstrap的官方文档，来选择我们想要的样式，并根据自己的一些实际情况

    2024年02月02日
    浏览(46)
  • 【前端素材】bootstrap5实现美食餐饮网站RegFood

    【前端素材】bootstrap5实现美食餐饮网站RegFood

    一、需求分析 美食餐饮网站是指专门提供关于美食和餐饮的信息、服务和资源的在线平台。这类网站通常提供以下功能： 餐厅搜索和预订：用户可以在网站上搜索附近的餐厅，并预订桌位。网站会提供餐厅的详细信息，包括菜单、地址、电话号码和用户评价等。 菜谱和食谱

    2024年02月03日
    浏览(44)
  • 用前端框架Bootstrap和Django实现用户注册页面

    用前端框架Bootstrap和Django实现用户注册页面

    命令如下： 执行下面条命令依次创建需要的应用： 名叫users的应用创建好后，还需要在全局配置文件中对应在用进行注册，具体方法如下： 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件，找到名叫“INSTALLED_APPS”的列表(list)，在其中加入应用名，

    2024年02月06日
    浏览(55)
  • Bootstrap自助抽样法的原理、应用与python实现

    Bootstrap自助抽样法的原理、应用与python实现

    Bootstrap自助抽样和交叉验证（Cross-Validation）一样也是一种重抽样（resampling）方法，它可以帮助近似得到统计量估计量的分布。 帮助估计统计量估计量的方差① 假设有 （其中T是分布 的函数）的估计量 ( X 1 , ... ,X n )，一般来说，要评价 的准确性（accuracy），需要计算其均方

    2024年02月02日
    浏览(48)
  • IDEA+SpringBoot + Mybatis + Shiro+Bootstrap+Mysql资产设备管理系统

    IDEA+SpringBoot + Mybatis + Shiro+Bootstrap+Mysql资产设备管理系统

    本系统实现了资产设备管理系统，管理端实现了管理员登录、用户新增、用户设置、岗位管理、审批节点、人员查询、组织设置、人员调整、角色设置、角色模块映射、模块设置、应用模块、光纤交换机、服务器、网络设备、存储设备、安全设备、机房设备、网点设备、资产

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包