bootstrape栅格样式偏移简单使用

「爱情、让人受尽委屈。」 2022-05-05 08:58 383阅读 0赞

1.  .col-xs- 超小屏幕 手机 (<768px)  
    .col-sm- 小屏幕 平板 (≥768px)  
    .col-md- 中等屏幕 显示器或者创建页面宽度(≥992px)  
    .col-lg- 大屏幕 显示器或者创建页面宽度 (≥1200px)
2.  bootstrap默认一行等比划分12列  
    col-xs-\* 设置元素占 \* 列  
    col-xs-x和col-xs-y使用时x+y=12
3.  左移右移不占栅格比例  
    col-xs-push-\* 右移  
    col-xs-pull-\* 左移  
    若x+y>12会重叠而不会被挤到第二行
4.  col-xs-offset-\* 右移 \* 列  
    col-xs-x 和col-xs-offset-y一起使用  
    x+y=12

$().ready(function () { 
            $(".labelDiv").each(function () { 
            	//删除原有样式
                $(this).removeClass("col-xs-12");
                //添加右移1/12
                $(this).addClass("col-xs-push-1");
                //该元素占4/12
                $(this).addClass("col-xs-4");
            });
            $(".contentDiv").each(function () { 
            	//删除原有样式
                $(this).removeClass("col-xs-12");
                //左移1/12
                $(this).addClass("col-xs-pull-1");
                //该元素占8/12
                $(this).addClass("col-xs-8");
            });
        });

发表评论取消回复

表情：

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

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

相关阅读

相关 BootStrap(栅格系统)

目录 1.什么是BootStrap 2.BootStrap简介 BootStrap栅格layout 3.BootStrap常用样式与标签常用样式 4.Boot

拼搏现实的明天。/ 2023年10月11日 19:37/ 0 赞/ 67 阅读

相关 Bootstrap栅格布局

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

谁践踏了优雅/ 2023年07月19日 14:29/ 0 赞/ 48 阅读

相关 Bootstrap-栅格系统

Bootstrap-栅格系统 1.栅格系统简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统

不念不忘少年蓝@/ 2023年06月18日 14:52/ 0 赞/ 39 阅读

相关 bootstrap栅格系统

全局css样式设置全局 CSS 样式；基本的 `HTML` 元素均可以通过 `class` 设置样式并得到增强效果；还有先进的栅格系统。 bootstrap为响应式

快来打我*/ 2023年06月10日 05:26/ 0 赞/ 35 阅读

相关 bootstrap栅格布局

首先，我们要为页面内容和栅格系统包裹一个 `.container` 容器： <div class="container"> ... </div>

一时失言乱红尘/ 2023年02月08日 12:59/ 0 赞/ 38 阅读

相关 Bootstrap栅格系统

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

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

相关 bootstrap栅格系统

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

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

相关 Bootstrap栅格系统使用方法

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

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

相关 bootstrape栅格样式偏移简单使用

1. .col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕显示器或者创建

「爱情、让人受尽委屈。」/ 2022年05月05日 08:58/ 0 赞/ 384 阅读

相关 Bootstrap 栅格系统

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

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