bootstrape栅格样式偏移简单使用

「爱情、让人受尽委屈。」 2022-05-05 08:58 371阅读 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 条评论，371人围观）

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

相关阅读

相关 Bootstrap栅格系统

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

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

相关 bootstrap栅格系统

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

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

相关 Bootstrap栅格系统使用方法

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

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

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

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

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

相关 Bootstrap入门--栅格系统

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

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

相关 bootstrap栅格化保证处于同一行，列偏移小记

bootstrap小记 class="col-xs-4 col-xs-offset-4" 解释：col-xs-4，用xs可以保证不会随着浏览器的变化位置会发生变化，

秒速五厘米/ 2022年04月04日 13:58/ 0 赞/ 554 阅读

相关 BootStrap_03 栅格布局

bootstrap – 一个标签中，同时有 col-xs , col-sm , col-md , col-lg .col-xs- 超小屏幕手机 (<768px) .co

不念不忘少年蓝@/ 2022年04月04日 07:56/ 0 赞/ 360 阅读

相关 Bootstrap 栅格基本模板使用

Bootstrap 3 学习使用：[官方下载及文档][Link 1] Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。注意：Bootstr

男娘i/ 2022年03月22日 08:54/ 0 赞/ 267 阅读

相关 Bootstrap 栅格系统

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

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

相关 bootstrap栅格系统总结

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

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