简单的css栅格化框架,Bootstrap3的栅格化布局样式-程序员宅基地

技术标签: 简单的css栅格化框架  

*{

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

.row:before,

.row:after {

display: table;

content: " ";

}

.row:after {

clear: both;

}

.col-xs-1,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9,

.col-xs-10,

.col-xs-11,

.col-xs-12,

.col-sm-1,

.col-sm-2,

.col-sm-3,

.col-sm-4,

.col-sm-5,

.col-sm-6,

.col-sm-7,

.col-sm-8,

.col-sm-9,

.col-sm-10,

.col-sm-11,

.col-sm-12,

.col-md-1,

.col-md-2,

.col-md-3,

.col-md-4,

.col-md-5,

.col-md-6,

.col-md-7,

.col-md-8,

.col-md-9,

.col-md-10,

.col-md-11,

.col-md-12,

.col-lg-1,

.col-lg-2,

.col-lg-3,

.col-lg-4,

.col-lg-5,

.col-lg-6,

.col-lg-7,

.col-lg-8,

.col-lg-9,

.col-lg-10,

.col-lg-11,

.col-lg-12 {

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

}

.col-xs-1,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9,

.col-xs-10,

.col-xs-11 {

float: left;

}

.col-xs-1 {

width: 8.333333333333332%;

}

.col-xs-2 {

width: 16.666666666666664%;

}

.col-xs-3 {

width: 25%;

}

.col-xs-4 {

width: 33.33333333333333%;

}

.col-xs-5 {

width: 41.66666666666667%;

}

.col-xs-6 {

width: 50%;

}

.col-xs-7 {

width: 58.333333333333336%;

}

.col-xs-8 {

width: 66.66666666666666%;

}

.col-xs-9 {

width: 75%;

}

.col-xs-10 {

width: 83.33333333333334%;

}

.col-xs-11 {

width: 91.66666666666666%;

}

.col-xs-12 {

width: 100%;

}

@media (min-width: 768px) {

.container {

max-width: 750px;

}

.col-sm-1,

.col-sm-2,

.col-sm-3,

.col-sm-4,

.col-sm-5,

.col-sm-6,

.col-sm-7,

.col-sm-8,

.col-sm-9,

.col-sm-10,

.col-sm-11 {

float: left;

}

.col-sm-1 {

width: 8.333333333333332%;

}

.col-sm-2 {

width: 16.666666666666664%;

}

.col-sm-3 {

width: 25%;

}

.col-sm-4 {

width: 33.33333333333333%;

}

.col-sm-5 {

width: 41.66666666666667%;

}

.col-sm-6 {

width: 50%;

}

.col-sm-7 {

width: 58.333333333333336%;

}

.col-sm-8 {

width: 66.66666666666666%;

}

.col-sm-9 {

width: 75%;

}

.col-sm-10 {

width: 83.33333333333334%;

}

.col-sm-11 {

width: 91.66666666666666%;

}

.col-sm-12 {

width: 100%;

}

.col-sm-push-1 {

left: 8.333333333333332%;

}

.col-sm-push-2 {

left: 16.666666666666664%;

}

.col-sm-push-3 {

left: 25%;

}

.col-sm-push-4 {

left: 33.33333333333333%;

}

.col-sm-push-5 {

left: 41.66666666666667%;

}

.col-sm-push-6 {

left: 50%;

}

.col-sm-push-7 {

left: 58.333333333333336%;

}

.col-sm-push-8 {

left: 66.66666666666666%;

}

.col-sm-push-9 {

left: 75%;

}

.col-sm-push-10 {

left: 83.33333333333334%;

}

.col-sm-push-11 {

left: 91.66666666666666%;

}

.col-sm-pull-1 {

right: 8.333333333333332%;

}

.col-sm-pull-2 {

right: 16.666666666666664%;

}

.col-sm-pull-3 {

right: 25%;

}

.col-sm-pull-4 {

right: 33.33333333333333%;

}

.col-sm-pull-5 {

right: 41.66666666666667%;

}

.col-sm-pull-6 {

right: 50%;

}

.col-sm-pull-7 {

right: 58.333333333333336%;

}

.col-sm-pull-8 {

right: 66.66666666666666%;

}

.col-sm-pull-9 {

right: 75%;

}

.col-sm-pull-10 {

right: 83.33333333333334%;

}

.col-sm-pull-11 {

right: 91.66666666666666%;

}

.col-sm-offset-1 {

margin-left: 8.333333333333332%;

}

.col-sm-offset-2 {

margin-left: 16.666666666666664%;

}

.col-sm-offset-3 {

margin-left: 25%;

}

.col-sm-offset-4 {

margin-left: 33.33333333333333%;

}

.col-sm-offset-5 {

margin-left: 41.66666666666667%;

}

.col-sm-offset-6 {

margin-left: 50%;

}

.col-sm-offset-7 {

margin-left: 58.333333333333336%;

}

.col-sm-offset-8 {

margin-left: 66.66666666666666%;

}

.col-sm-offset-9 {

margin-left: 75%;

}

.col-sm-offset-10 {

margin-left: 83.33333333333334%;

}

.col-sm-offset-11 {

margin-left: 91.66666666666666%;

}

}

@media (min-width: 992px) {

.container {

max-width: 970px;

}

.col-md-1,

.col-md-2,

.col-md-3,

.col-md-4,

.col-md-5,

.col-md-6,

.col-md-7,

.col-md-8,

.col-md-9,

.col-md-10,

.col-md-11 {

float: left;

}

.col-md-1 {

width: 8.333333333333332%;

}

.col-md-2 {

width: 16.666666666666664%;

}

.col-md-3 {

width: 25%;

}

.col-md-4 {

width: 33.33333333333333%;

}

.col-md-5 {

width: 41.66666666666667%;

}

.col-md-6 {

width: 50%;

}

.col-md-7 {

width: 58.333333333333336%;

}

.col-md-8 {

width: 66.66666666666666%;

}

.col-md-9 {

width: 75%;

}

.col-md-10 {

width: 83.33333333333334%;

}

.col-md-11 {

width: 91.66666666666666%;

}

.col-md-12 {

width: 100%;

}

.col-md-push-0 {

left: auto;

}

.col-md-push-1 {

left: 8.333333333333332%;

}

.col-md-push-2 {

left: 16.666666666666664%;

}

.col-md-push-3 {

left: 25%;

}

.col-md-push-4 {

left: 33.33333333333333%;

}

.col-md-push-5 {

left: 41.66666666666667%;

}

.col-md-push-6 {

left: 50%;

}

.col-md-push-7 {

left: 58.333333333333336%;

}

.col-md-push-8 {

left: 66.66666666666666%;

}

.col-md-push-9 {

left: 75%;

}

.col-md-push-10 {

left: 83.33333333333334%;

}

.col-md-push-11 {

left: 91.66666666666666%;

}

.col-md-pull-0 {

right: auto;

}

.col-md-pull-1 {

right: 8.333333333333332%;

}

.col-md-pull-2 {

right: 16.666666666666664%;

}

.col-md-pull-3 {

right: 25%;

}

.col-md-pull-4 {

right: 33.33333333333333%;

}

.col-md-pull-5 {

right: 41.66666666666667%;

}

.col-md-pull-6 {

right: 50%;

}

.col-md-pull-7 {

right: 58.333333333333336%;

}

.col-md-pull-8 {

right: 66.66666666666666%;

}

.col-md-pull-9 {

right: 75%;

}

.col-md-pull-10 {

right: 83.33333333333334%;

}

.col-md-pull-11 {

right: 91.66666666666666%;

}

.col-md-offset-0 {

margin-left: 0;

}

.col-md-offset-1 {

margin-left: 8.333333333333332%;

}

.col-md-offset-2 {

margin-left: 16.666666666666664%;

}

.col-md-offset-3 {

margin-left: 25%;

}

.col-md-offset-4 {

margin-left: 33.33333333333333%;

}

.col-md-offset-5 {

margin-left: 41.66666666666667%;

}

.col-md-offset-6 {

margin-left: 50%;

}

.col-md-offset-7 {

margin-left: 58.333333333333336%;

}

.col-md-offset-8 {

margin-left: 66.66666666666666%;

}

.col-md-offset-9 {

margin-left: 75%;

}

.col-md-offset-10 {

margin-left: 83.33333333333334%;

}

.col-md-offset-11 {

margin-left: 91.66666666666666%;

}

}

@media (min-width: 1200px) {

.container {

max-width: 1170px;

}

.col-lg-1,

.col-lg-2,

.col-lg-3,

.col-lg-4,

.col-lg-5,

.col-lg-6,

.col-lg-7,

.col-lg-8,

.col-lg-9,

.col-lg-10,

.col-lg-11 {

float: left;

}

.col-lg-1 {

width: 8.333333333333332%;

}

.col-lg-2 {

width: 16.666666666666664%;

}

.col-lg-3 {

width: 25%;

}

.col-lg-4 {

width: 33.33333333333333%;

}

.col-lg-5 {

width: 41.66666666666667%;

}

.col-lg-6 {

width: 50%;

}

.col-lg-7 {

width: 58.333333333333336%;

}

.col-lg-8 {

width: 66.66666666666666%;

}

.col-lg-9 {

width: 75%;

}

.col-lg-10 {

width: 83.33333333333334%;

}

.col-lg-11 {

width: 91.66666666666666%;

}

.col-lg-12 {

width: 100%;

}

.col-lg-push-0 {

left: auto;

}

.col-lg-push-1 {

left: 8.333333333333332%;

}

.col-lg-push-2 {

left: 16.666666666666664%;

}

.col-lg-push-3 {

left: 25%;

}

.col-lg-push-4 {

left: 33.33333333333333%;

}

.col-lg-push-5 {

left: 41.66666666666667%;

}

.col-lg-push-6 {

left: 50%;

}

.col-lg-push-7 {

left: 58.333333333333336%;

}

.col-lg-push-8 {

left: 66.66666666666666%;

}

.col-lg-push-9 {

left: 75%;

}

.col-lg-push-10 {

left: 83.33333333333334%;

}

.col-lg-push-11 {

left: 91.66666666666666%;

}

.col-lg-pull-0 {

right: auto;

}

.col-lg-pull-1 {

right: 8.333333333333332%;

}

.col-lg-pull-2 {

right: 16.666666666666664%;

}

.col-lg-pull-3 {

right: 25%;

}

.col-lg-pull-4 {

right: 33.33333333333333%;

}

.col-lg-pull-5 {

right: 41.66666666666667%;

}

.col-lg-pull-6 {

right: 50%;

}

.col-lg-pull-7 {

right: 58.333333333333336%;

}

.col-lg-pull-8 {

right: 66.66666666666666%;

}

.col-lg-pull-9 {

right: 75%;

}

.col-lg-pull-10 {

right: 83.33333333333334%;

}

.col-lg-pull-11 {

right: 91.66666666666666%;

}

.col-lg-offset-0 {

margin-left: 0;

}

.col-lg-offset-1 {

margin-left: 8.333333333333332%;

}

.col-lg-offset-2 {

margin-left: 16.666666666666664%;

}

.col-lg-offset-3 {

margin-left: 25%;

}

.col-lg-offset-4 {

margin-left: 33.33333333333333%;

}

.col-lg-offset-5 {

margin-left: 41.66666666666667%;

}

.col-lg-offset-6 {

margin-left: 50%;

}

.col-lg-offset-7 {

margin-left: 58.333333333333336%;

}

.col-lg-offset-8 {

margin-left: 66.66666666666666%;

}

.col-lg-offset-9 {

margin-left: 75%;

}

.col-lg-offset-10 {

margin-left: 83.33333333333334%;

}

.col-lg-offset-11 {

margin-left: 91.66666666666666%;

}

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39628405/article/details/119367208

智能推荐

码云推荐 | 那些优秀的 JavaScript 开源项目_javascript实战 码云-程序员宅基地

文章浏览阅读1.1k次。1. 项目名称:jQuery 树插件 zTree v3 系列 (GVP项目)项目简介:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点;zTree 是开源免费的软件, 使用 MIT 许可证;zTree v3.x 将核心代码按照功能进行了分割,不需要的代码可以不用加载;采用了 延迟加载 技术,上万节点轻松加_javascript实战 码云

MyBatis中Case when esle end 的用法-程序员宅基地

文章浏览阅读1.7k次。CASE p.sharesNature WHEN 0 THEN '限售' WHEN 1 THEN '流通' ELSE '未知' END转载于:https://www.cnblogs.com/xushirong/p/8471406.ht..._mybatis case when then else end

spark kryo java,在Spark中自定义Kryo序列化输入输出API-程序员宅基地

文章浏览阅读224次。在在虽然Kryo支持对RDD的cache和shuffle,但是在Spark中不是内置就显示提供使用Kryo将数据系列化到磁盘中的输入输出API,RDD中的saveAsObjectFile和SparkContext中的objectFile方法仅仅支持使用Java系列化。所以如果我们可以使用Kryo系列化将会变得很棒!在这篇文章中,我将讨论如何自定义Kryo系列化输出输出相关API来将数据进行读写到磁..._kryoserializer kryoserializer = new kryoserializer();

html中span的宽高,css如何设置span的相对宽度?-程序员宅基地

文章浏览阅读872次。css如何设置span的相对宽度?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。因为span标签元素属于内联元素,而内联元素是忽略宽度和高度的,无法设置宽度和高度。可以使用display属性将span元素转换为块状元素或行内块状元素。块状元素或行内块状元素的高度、宽度、行高以及顶和底边距都可设置。display:block--将元素显示为块级元素,..._css获取span的宽度

通过JDBC进行简单的增删改查(以MySQL为例)-程序员宅基地

文章浏览阅读2.3k次。通过JDBC进行简单的增删改查(以MySQL为例)前言:什么是JDBC  维基百科的简介:Java 数据库连接,(Java Database Connectivity,简称JDBC)是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提供了诸如查询和更新数据库中数据的方法。JDBC也是Sun Microsystems的商标。它JDBC是面向关系型数据库的。

TensorFlow gfile文件操作详解-程序员宅基地

文章浏览阅读302次。转:https://blog.csdn.net/u014182497/article/details/80681331一、gfile模块是什么gfile模块定义在tensorflow/python/platform/gfile.py,但其源代码实现主要位于tensorflow/tensorflow/python/lib/io/file_io.py,那么gfile模块主要功...

随便推点

100个网站需要的服务器配置,100并发服务器需要什么配置-程序员宅基地

文章浏览阅读1.4k次。100并发服务器需要什么配置 内容精选换一换压测是需要模拟用户实际业务操作的真实使用场景,那么并发用户数是模拟一定数量用户操作的一个配置。例如,游戏网站某个时间点进行竞技活动,那么这个时候对设备的要求肯定是最高的。并发用户数就是模拟成千上万的用户在同一个时间点进行各种操作的配置数。这个时候我们将并发用户数,同时结合并发时间和思考时间来进行计算并发请求的数量,压测出服务器最终饱和数据100开头的IP...

一个人「已经废掉了」和「还没废掉」的 5 种区别_一个人开始「废掉」的三种迹象-程序员宅基地

文章浏览阅读438次。经过一番比较和分析,我大概总结了一个人「已经废了」和「还没废掉」的5种区别,有兴趣的朋友可以了解一下。当然,我的想法,不代表正确,只是作一个参考。 - 01 - 没有废掉的人靠动力活着,已经废掉的人靠压力活着 这是牛人和普通人的根本区别。我们通常区别牛人和普通人的方式是——天赋和努力程度。 天赋这个东西就不说了,其实我们每个人,都有自己擅长的东西,都会在某..._一个人开始「废掉」的三种迹象

迷你世界显示服务器错误,迷你世界无法登陆及闪退怎么办 解决方法详解-程序员宅基地

文章浏览阅读8.6k次。迷你世界无法登陆及闪退怎么办呢?有什么解决方法呢?是什么原因呢?接下来就跟随小编一起来看看吧,希望对大家有所帮助。迷你世界【安卓版下载】闪退的解决方案:第1种:玩一段时间闪退,可能是因为运行内存不足造成的解决办法:可以关闭一下后台程序(包括迷你世界),多预留一些运行内存,再重新进入试下哦,看看能否解决~第2种现象:进/下载某一个特定的存档才会闪退,进行某一个特定的操作闪退解决办法:忽略那个有问题的...

使用CenterNet训练自己的数据集-程序员宅基地

文章浏览阅读6.9k次,点赞8次,收藏52次。最近在做目标检测的项目,使用YOLOv3,Mask R-CNN,Faster R-CNN训练了自己的数据,效果还可以,在保证精度的情况下,速度有点慢。于是就开始找别的方法,发现了2019年CVPR的文章CenterNet :Objects as Points,想尝试看看效果。于是就开始了艰难的配置,在这里记录一下。我是在服务器上训练的,环境是cuda10 ,使用的代码是https://githu..._centernet训练自己的数据集

android afw模式,[HUAWEI-TITANC328]手机加密功能开启后,工作区中添加超级备份手机不断重启的分析报告...-程序员宅基地

文章浏览阅读319次。工作区中添加超级备份手机不断重启的分析报告【华为反馈】 【TIT-AL00C328B120_AFW_必现】创建工作空间后升级系统,升级失败,手机循环重启。通过分析log发现,实际上这个问题与OTA无关,而与工作区应用发出的notification有关。经过沟通和自测,复现了此问题。步骤如下:1、插入sim卡【sim卡中有2个联系人,手机中无】创建afw工作区;【测试前手机已恢复出厂设置】2、adb..._afwlfv

推荐文章

热门文章

相关标签