bootstrap网格系统中col-xs-*，col-sm-*，col-md-*，col-lg-* 的意义及列重置，偏移列，嵌套列和列排序...

最新推荐文章于 2023-05-25 21:07:27 发布
最新推荐文章于 2023-05-25 21:07:27 发布
阅读量1.3k 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：https://my.oschina.net/u/3627873/blog/1499736
版权

摘要: bootstrap网格系统中col-xs-*，col-sm-*，col-md-*，col-lg-* 的意义，列重置，偏移列，嵌套列和列排序

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

 超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

说明：

1、col-列；

2、xs-maxsmall，超小； sm-small，小型； md-medium，中型；  lg-large，大型

3、-*表示占列，即占自动每行row分12列栅格系统比；

4、不管在哪种屏幕上，栅格系统都会自动的每行row分12列。col-xs-*,col-sm-* ,col-md-*和col-lg-* 后面跟的参数（此时用*表示）表示在当前的屏幕中每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

5、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

6、案例说明：

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
    </div>

响应式的列重置

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 *范围是从 1 到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

结果如下所示：

网格系统偏移列

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

结果如下所示：

网格系统嵌套列

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

结果如下所示：

网格系统排序列

案例

<%@ page language="java" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>栅格</title>
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <meta name="author" content="linjiqin218@126.com" />
        <meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <jsp:include page="/demo/base/js_bootstrap.jsp" />
        <style type="text/css">
        .show-grid [class ^="col-"] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            border: 1px solid #ddd;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid rgba(86, 61, 124, .2);
        }
        </style>
        <script type="text/javascript">
        $(function(){
        });
        </script>
    </head>
    <body>
        <b>col-lg-*用法</b>  
        <br/> 
        <div class="row show-grid">
          <div class="col-lg-8">.col-lg-8</div>
          <div class="col-lg-4">.col-lg-4</div>
        </div>
        <br/>         
        <b>col-md-*用法</b>
        <div class="row show-grid">
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
        </div>
        <br/> 
        <div class="row show-grid">
          <div class="col-md-8">.col-md-8</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
        <br/> 
        <b>col-sm-*用法</b>
        <div class="row show-grid">
          <div class="col-sm-8">.col-sm-8</div>
          <div class="col-sm-4">.col-sm-4</div>
        </div>
        <br/>             
        <b>col-xs-*用法</b>
        <div class="row show-grid">
          <div class="col-xs-8">.col-xs-8</div>
          <div class="col-xs-4">.col-xs-4</div>
        </div>    
        <br/>     
        <b>列偏移: col-md-offset-*</b>
        <div class="row show-grid">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row show-grid">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row show-grid">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <br/>     
        <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
        <div class="row show-grid">
            <div class="col-md-9">
                Level 1: .col-md-9
                <div class="row show-grid">
                    <div class="col-md-6">Level 2: .col-md-6</div>
                    <div class="col-md-6">Level 2: .col-md-6</div>
                </div>
            </div>
        </div>
        <br/>     
        <b>列排序: .col-md-push-*和.col-md-pull-*</b>    
        <div class="row show-grid">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>        
    </body>
</html>

演示效果

 

转载于:https://my.oschina.net/u/3627873/blog/1499736

cii1929
关注
Bootstrap栅格系统
weixin_45846263的博客
05-04 444
栅格系统 栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局： 行（.row）必须包含在容器container或container-fluid里； 在行内创建一组水平排开的列（.col）； 每一行被分为12格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）； 每一行的列所占格数超过12，便会引起换行； 可以对...
Bootstrap4中Grid栅格系统CSS中 col-sm- col-md- col-lg- 的意义
糖长老莫小贝的博客
07-21 3269
注意：如今大部分手机是<576px的,我查阅很多博客看他们好多写的是.col-xs-,我按照那种方法试不行，我用的是bootstrapvue4.3根本没有什么.col-xs- 这一说 于是亲自用浏览器F12手机模式调试，亲测.col-对于手机才可行！这点bootstrap更新了，一定要注意别踩坑！ 说明： col- 列；-*表示占列，即占自动每个row分12列栅格系统比； 栅格...
使用Bootstrap重新排序CSS列
culiu9261的博客
07-18 362
Bootstrap has a great many features. One of the main features that is used in pretty much every Bootstrap project I've ever seen is the grid system. The grid system provides a great tool to scaffold ...
bootstrape栅格样式偏移简单使用
渣渣的博客
10-17 1506
bootstrap默认一行等比划分12列 col-xs-* 设置元素占 * 列 col-xs-x和col-xs-y使用时x+y=12 左移右移不占栅格比例 col-xs-push-* 右移 col-xs-pull-* 左移 若x+y&amp;gt;12会重叠而不会被挤到第二行 col-xs-offset-* 右移 * 列 col-xs-x 和col-xs-offset...
Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法
weixin_30908707的博客
05-31 400
（1）概括 一句话概括：根据显示屏幕宽度的大小，自动的选用对应的类的样式。 （2）关键字段 1、col是column简写：列； 2、xs是maxsmall简写：超小，sm是small简写：小， md是medium简写：中等，lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&...
bootstrap里col-xs , col-sm ,col-md,col-lg的区别
weixin_38383877的博客
07-28 6134
前言         对于一些初学boostrap的同学来说，肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧，我刚开始也表示一脸懵逼，后来查阅了这篇文章才搞懂了他们之间的区别，我整理了一下供大家一起学习。 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义： .col-xs-* 超小屏幕 手机 (&lt;76...
03-bootstrap-响应式布局-栅格系统
记录java学习日常~
05-25 2910
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
Bootstrap基础---网格系统
遇见更好的自己
06-01 569
看到Bootstrap 可视化布局之后，感觉还是很震撼的，之前的代码都是自己一点点写，现在拖动一下就出来了效果，所以决定尝试一下。今后会持续更新自己学的笔记。 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 1.Bootstrap引入<!DOCTYPE html> <html> <head>
Web-前端html+css从入门到精通 211. bootstrap4之grid（上）.zip
05-23
- Bootstrap 4支持五种响应式断点：`xs`(超小屏幕)，`sm`(小屏幕)，`md`(中等屏幕)，`lg`(大屏幕)和`xl`(额外大屏幕)。开发者可以使用预定义的类如`.col-sm-4`，在不同屏幕尺寸下调整列的宽度。 4. **Flexbox支持*...
Web-前端html+css从入门到精通 212. bootstrap4之grid（下）.zip
05-23
1. **响应式断点**：Bootstrap定义了不同屏幕尺寸的断点，如xs（超小），sm（小），md（中），lg（大）和xl（额外大）。这些断点帮助开发者针对不同设备进行定制布局。 2. **类前缀**：在Bootstrap 4中，使用`.col-...
bootstrap栅格系统布局原理
u013809856的博客
11-23 7062
简介 栅格系统用于通过一系列的行（row）与列（col）组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理： 行（row）必须放在.container（固定宽度）或.container-fluid（100%宽度）内，以便为其赋予合适的排列（aligment）和内补（padding）; 通过“行（row）”在水平方向创建一组“列（co...
【RuoYi框架】RuoYi框架学习超简单案例 - 新闻管理系统（附源码）
热门推荐
长生的梦呓
01-25 6万+
文章目录前言一、需求 前言 这篇文章将会讲如何用RuoYi框架做一个简单的新闻系统。 感谢作者的无私开源！ RuoYi官网：http://ruoyi.vip/ RuoYi文档：http://doc.ruoyi.vip/ RuoYi源码下载：https://gitee.com/y_project/RuoYi 一、需求 做一个新闻系统，每一 ...
响应式网格（栅格化）布局
weixin_30722589的博客
08-08 399
响应式网格系统 响应式网格系统的概念 把网页划分成列、行、外边距、隔离带（各列与各行之间的空白）等由一系列相交的水平轴和垂直轴组成的网格。 网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的...
bootstrap--栅格系统详解（源码分析）
weixin_47942860的博客
03-17 2355
对bootstrap源码进行了简单的分析，通过递归可以实现响应式布局，以及介绍了栅格系统的精妙之处。1.bootstrap是什么？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap-栅格系统
sofia92的博客
03-25 3020
一、栅格参数是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs- 和 .col-md-。请看下面的实例，研究一下这些是如何工作的。 比如HTML代码：<div class="row"> <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> content
BootStrap框架模块：BootStrap4基础
LiLi的博客
01-14 4927
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点。 BootStrap中文官网 第一章 BootStrap4基础 下载 Bootstr
Bootstrap4--网格系统、文字排版、颜色、表格、图像形状相关知识点汇总
m0_63341919的博客
11-19 1051
一、网格系统 1、 网格类 .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 2、Bootstrap 4网格的基本结构 （1）、创建相等宽度的列，Bootstrap 自动布局 例： <div class="col" style="background-
BOOTSTRAP4的栅格系统详解
shanzhihang的专栏
01-04 2585
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 列与列间
BootStrap4 入门教程学习摘要笔记
抓更够
08-25 2228
个人在学习BootStrap4入门教程时做的摘要笔记 时不时更新
col-xs-offset-4类可以将列向左移动4列
最新发布
06-01
是的，Bootstrap 中的 `col-xs-offset-4` 类可以将列向左移动 4 列。 具体来说，Bootstrap 的网格系统是基于 12 列的。每个列具有相同的宽度，可以通过添加 `col-xs-*`、`col-sm-*`、`col-md-*` 或 `col-lg-*` 类来指定不同的列宽。例如，`col-xs-4` 将元素分配为 4 列宽度，占据其父元素的 1/3 宽度。 如果你想将某个列向左移动 n 列，可以使用 `col-xs-offset-n` 类。例如，`col-xs-offset-4` 将元素向左移动 4 列宽度。这意味着该元素将从其正常位置向左移动，并且在其左侧将有 4 列空白区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值