bootstrap中的栅格系统详解

最新推荐文章于 2025-04-01 01:50:29 发布

小白张幺幺

最新推荐文章于 2025-04-01 01:50:29 发布

阅读量2k

点赞数

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/zzh1251994430/article/details/109476820

版权

本文详细介绍了Bootstrap的响应式栅格系统，包括其12列布局原理、使用规则、实例展示以及参数设置。通过创建行(row)和列(col)组合布局，并利用媒体查询实现不同设备上的响应式设计。理解这些内容有助于高效构建网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap中的栅格系统

简介

什么是栅格系统？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统）

原理

栅格系统通过行（row）与列（col）组成页面布局，页面内容就放入这些创建好的容器中。

使用规则

1.内容必须放在创建好的"container"容器中。
例：

<!-- 容器 -->
<div class="container">
  <!-- 行 -->
  <div class="row"></div>
</div>

2.在行(.row)中可以添加列(.col)，但列数之和不能超过平分的总列数12。
例：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            内容一
        </div>
        <div class="col-md-4">
            内容二
        </div>
    </div>
</div>

3.具体内容应当放置在列容器（col）之内，而且只有列（col）才可以作为行容器(.row)的直接子元素。

4.通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外（margin）来抵消内距(padding)的影响。

实例

创建一个12栅格系统：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .row {
            margin-top: 100px;
        }

        .row div {
            border: 1px solid skyblue;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 一行分成12等分 -->
        <div class="row">
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
            <div class="col-md-1">占了一格</div>
        </div>
         <!-- 一行分成6等分 -->
        <div class="row">
            <div class="col-md-2">占了二格</div>
            <div class="col-md-2">占了二格</div>
            <div class="col-md-2">占了二格</div>
            <div class="col-md-2">占了二格</div>
            <div class="col-md-2">占了二格</div>
            <div class="col-md-2">占了二格</div>
        </div>
        <!-- 一行分成3等分 -->
        <div class="row">
            <div class="col-md-4">占了三格</div>
            <div class="col-md-4">占了三格</div>
            <div class="col-md-4">占了三格</div>
        </div>
        <!-- 一行分成2等分 -->
        <div class="row">
            <div class="col-md-6">占了六格</div>
            <div class="col-md-6">占了六格</div>
        </div>
        <!-- 独占一行 -->
        <div class="row">
            <div class="col-md-12">占了十二格</div>
        </div>
    </div>
</body>
</html>

注意：将 .container 修改为 .container-fluid，就可以将固定宽度改变成100%宽度。（.container：居中效果，两边会有一个默认为15px的margin边距。.container-fluid：铺满。）

参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)	超大屏
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

注：
1.如果你的内容想在手机上显示那么你就可以调用.col-xs-。
2.如果你的内容想在平板上显示那么你就可以调用.col-sm-。
3.如果你的内容想在pc上显示那么你就可以调用.col-md-。

响应式案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .row div {
            display: flex;
            align-items: center;
            height: 300px;
            justify-content: center;
            font-size: 18px;
            color: #fff;
        }

        .row div:nth-child(1) {
            background: skyblue;
        }

        .row div:nth-child(2) {
            background: purple;
        }

        .row div:nth-child(3) {
            background: pink;
        }

        .row div:nth-child(4) {
            background: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3">
                第一块内容 <br> pc占3格 <br>平板占6格<br>手机占12格
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                第二块内容 <br> pc占3格 <br>平板占6格<br>手机占12格
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                第三块内容<br> pc占3格 <br>平板占6格<br>手机占12格
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                第四块内容<br> pc占3格 <br>平板占6格<br>手机占12格
            </div>
        </div>
    </div>
</body>
</html>