bootstrap栅格系统总结

迈不过友情╰ 2021-10-01 10:58 393阅读 0赞

<div class="container">
      <div class="row">
        <div class="col-xs-  col-sm-"></div>
        <div class="col-xs-  col-sm-"></div>
        <div class="col-xs-  col-sm-"></div>
        <div class="col-xs-  col-sm-"></div>
      </div>
    </div>

> .container与.container\_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

.container 类用于固定宽度并支持响应式布局的容器。  
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。  
bootstrap.css中对.container的定义：

.container{
        padding-right:15px;
        padding-left:15px;
        margin-right:auto;
        margin-left:auto
    }
    @media (min-width:768px){
        .container{
            width:750px
        }
    }
    @media (min-width:992px){
        .container{
            width:970px
        }
    }
    @media (min-width:1200px){
        .container{
            width:1170px
        }
    }

.col-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；适用于手机；  
.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；适用于平板；  
.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；适用于桌面显示器；  
.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

> Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；

<div class="container">
    　　<div class="row">
    　　　　<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    　　　　<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    　　</div>
    　　<div class="row">
    　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    　　</div>
    </div>

屏幕大于992px时：.col-md-8 和.col-md-4 还处于 作用范围内，如下

![6587214-217e39c830b316f8.png][]

image

屏幕在769px-992px之间时：.col-md-已失效，而.col-sm- 还处在 作用范围内，如下

![6587214-1827e2791758a64f.png][]

image

屏幕宽度小于768px时，.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响，这时候就由.col-xs-起作用，如下

![6587214-74d2a42743ca3f48.png][]

image

[6587214-217e39c830b316f8.png]: /images/20210804/9ebcf4c3a16d402da8f4c596659616d4.png
[6587214-1827e2791758a64f.png]: /images/20210804/a5f1c78c94c7478bb50430bdac6cca6c.png
[6587214-74d2a42743ca3f48.png]: /images/20210804/eaa3c59897d8405c8352a8c19c19ccce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，393人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap学习笔记01-栅格系统

、bootstrap的安装 1.在bootstrap官网下载安装包[bootstrap官网][bootstrap]。 ![watermark_type_ZmFuZ3p...

素颜马尾好姑娘i/ 2024年04月19日 08:35/ 0 赞/ 10 阅读

相关 2.2Bootstrap栅格系统案例

本文系列按照某大神学习系列一一敲出，并非自己写的或者是直接复制。只是希望通过这个系列可以快速掌握这个框架而已。细节方面不再赘述。 1、栅格选项

清疚/ 2022年08月27日 03:29/ 0 赞/ 169 阅读

相关 Bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 > 一.移动设备优先 > H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问

我不是女神ヾ/ 2022年06月12日 03:59/ 0 赞/ 214 阅读

相关 bootstrap栅格系统

注意：最后加起来是12列 <div class="row"> <div class="col-md-1">.col-md-1</div> <d

川长思鸟来/ 2022年05月28日 11:13/ 0 赞/ 207 阅读

相关 Bootstrap栅格系统使用方法

如果你以前使用过Bootstrap2或者了解过[响应式技术][Link 1]，那么肯定对Bootstrap栅格系统并不陌生，由于栅格系统的引入，使得[Bootstrap][]的

向右看齐/ 2022年05月15日 16:59/ 0 赞/ 242 阅读

相关 bootstrap 栅格系统自动隐藏

[bootstrap 栅格系统自动隐藏][bootstrap _] 1 [Container][] 顾名思义[Container][]是栅格系统最外层的class，直

我不是女神ヾ/ 2022年05月12日 12:58/ 0 赞/ 245 阅读

相关 Bootstrap入门--栅格系统

在Bootstrap的学习中，栅格系统的使用可谓是十分重要了。使用栅格系统布局实际上可以简单理解为 “加强版的表格(table)布局”。根据Bootstrap官方文档的描述

Love The Way You Lie/ 2022年04月12日 08:50/ 0 赞/ 295 阅读

相关 Bootstrap之栅格系统

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

灰太狼/ 2021年12月10日 04:13/ 0 赞/ 233 阅读

相关 Bootstrap 栅格系统

1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义

逃离我推掉我的手/ 2021年11月30日 01:06/ 0 赞/ 319 阅读

相关 bootstrap栅格系统总结

<div class="container"> <div class="row"> <div class="col-xs- col-sm-

迈不过友情╰/ 2021年10月01日 10:58/ 0 赞/ 394 阅读