返回新闻列表

独立的格栅系统,col-lg col-sm col-md

发布日期: 2024-02-21 | 来源: 智软设计工作室

/* container */
*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.container{ position: relative; margin-right: auto; margin-left: auto;}
.row{ position: relative; margin: 0; padding: 0;}
.container:before,.container:after,.row:before,.row:after,.clearfix:before, .clearfix:after{ display: table; content: " "; clear: both;}


/* media */
.col-pd,.col-lg-1,.col-lg-10,.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-md-1,.col-md-10,.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-sm-1,.col-sm-10,.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-xs-1,.col-xs-10,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px}.col-xs-1,.col-xs-10,.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-wide-1,.col-xs-wide-10,.col-xs-wide-15,.col-xs-wide-2,.col-xs-wide-25,.col-xs-wide-3,.col-xs-wide-35,.col-xs-wide-4,.col-xs-wide-45,.col-xs-wide-5,.col-xs-wide-55,.col-xs-wide-6,.col-xs-wide-65,.col-xs-wide-7,.col-xs-wide-75,.col-xs-wide-8,.col-xs-wide-85,.col-xs-wide-9,.col-xs-wide-95{float:left}.col-xs-10{width:10%}.col-xs-9{width:11.1111111%}.col-xs-8{width:12.5%}.col-xs-7{width:14.2857143%}.col-xs-6{width:16.6666667%}.col-xs-5{width:20%}.col-xs-4{width:25%}.col-xs-3{width:33.3333333%}.col-xs-2{width:50%}.col-xs-1{width:100%}.col-xs-wide-10{width:10%}.col-xs-wide-9{width:90%}.col-xs-wide-8{width:80%}.col-xs-wide-7{width:70%}.col-xs-wide-6{width:60%}.col-xs-wide-5{width:50%}.col-xs-wide-4{width:40%}.col-xs-wide-3{width:30%}.col-xs-wide-2{width:20%}.col-xs-wide-15{width:15%}.col-xs-wide-95{width:95%}.col-xs-wide-85{width:85%}.col-xs-wide-75{width:75%}.col-xs-wide-65{width:65%}.col-xs-wide-55{width:55%}.col-xs-wide-45{width:45%}.col-xs-wide-35{width:35%}.col-xs-wide-25{width:25%}.img-xs-300{ width: 300px;}.img-xs-220{ width: 220px;}.img-xs-190{ width: 190px;}.img-xs-160{ width: 160px;}.img-xs-150{ width: 150px;}.img-xs-140{ width: 140px;}.img-xs-130{ width: 130px;}.img-xs-120{ width: 120px;}.img-xs-110{ width: 110px;}.img-xs-100{ width: 100px;}.img-xs-90{ width: 90px;}.img-xs-80{ width: 80px;}.img-xs-70{ width: 70px;}

@media (min-width: 768px){
	.col-sm-1,.col-sm-10,.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-wide-1,.col-sm-wide-10,.col-sm-wide-15,.col-sm-wide-2,.col-sm-wide-25,.col-sm-wide-3,.col-sm-wide-35,.col-sm-wide-4,.col-sm-wide-45,.col-sm-wide-5,.col-sm-wide-55,.col-sm-wide-6,.col-sm-wide-65,.col-sm-wide-7,.col-sm-wide-75,.col-sm-wide-8,.col-sm-wide-85,.col-sm-wide-9,.col-sm-wide-95{float:left}.col-sm-10{width:10%}.col-sm-9{width:11.1111111%}.col-sm-8{width:12.5%}.col-sm-7{width:14.2857143%}.col-sm-6{width:16.6666667%}.col-sm-5{width:20%}.col-sm-4{width:25%}.col-sm-3{width:33.3333333%}.col-sm-2{width:50%}.col-sm-1{width:100%}.col-sm-wide-10{width:10%}.col-sm-wide-9{width:90%}.col-sm-wide-8{width:80%}.col-sm-wide-7{width:70%}.col-sm-wide-6{width:60%}.col-sm-wide-5{width:50%}.col-sm-wide-4{width:40%}.col-sm-wide-3{width:30%}.col-sm-wide-2{width:20%}.col-sm-wide-15{width:15%}.col-sm-wide-95{width:95%}.col-sm-wide-85{width:85%}.col-sm-wide-75{width:75%}.col-sm-wide-65{width:65%}.col-sm-wide-55{width:55%}.col-sm-wide-45{width:45%}.col-sm-wide-35{width:35%}.col-sm-wide-25{width:25%}.img-sm-300{ width: 300px;}.img-sm-220{ width: 220px;}.img-sm-190{ width: 190px;}.img-sm-160{ width: 160px;}.img-sm-150{ width: 150px;}.img-sm-140{ width: 140px;}.img-sm-130{ width: 130px;}.img-sm-120{ width: 120px;}.img-sm-110{ width: 110px;}.img-sm-100{ width: 100px;}.img-sm-90{ width: 90px;}.img-sm-80{ width: 80px;}.img-sm-70{ width: 70px;}
}

@media (min-width: 1024px){	
	.col-md-1,.col-md-10,.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-wide-1,.col-md-wide-10,.col-md-wide-15,.col-md-wide-2,.col-md-wide-25,.col-md-wide-3,.col-md-wide-35,.col-md-wide-4,.col-md-wide-45,.col-md-wide-5,.col-md-wide-55,.col-md-wide-6,.col-md-wide-65,.col-md-wide-7,.col-md-wide-75,.col-md-wide-8,.col-md-wide-85,.col-md-wide-9,.col-md-wide-95{float:left}.col-md-10{width:10%}.col-md-9{width:11.1111111%}.col-md-8{width:12.5%}.col-md-7{width:14.2857143%}.col-md-6{width:16.6666667%}.col-md-5{width:20%}.col-md-4{width:25%}.col-md-3{width:33.3333333%}.col-md-2{width:50%}.col-md-1{width:100%}.col-md-wide-10{width:10%}.col-md-wide-9{width:90%}.col-md-wide-8{width:80%}.col-md-wide-7{width:70%}.col-md-wide-6{width:60%}.col-md-wide-5{width:50%}.col-md-wide-4{width:40%}.col-md-wide-3{width:30%}.col-md-wide-2{width:20%}.col-md-wide-15{width:15%}.col-md-wide-95{width:95%}.col-md-wide-85{width:85%}.col-md-wide-75{width:75%}.col-md-wide-65{width:65%}.col-md-wide-55{width:55%}.col-md-wide-45{width:45%}.col-md-wide-35{width:35%}.col-md-wide-25{width:25%}.img-md-300{ width: 300px;}.img-md-220{ width: 220px;}.img-md-190{ width: 190px;}.img-md-160{ width: 160px;}.img-md-150{ width: 150px;}.img-md-140{ width: 140px;}.img-md-130{ width: 130px;}.img-md-120{ width: 120px;}.img-md-110{ width: 110px;}.img-md-100{ width: 100px;}.img-md-90{ width: 90px;}.img-md-80{ width: 80px;}.img-md-70{ width: 70px;}
}

@media (min-width: 1366px){		
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
	.col-lg-1,.col-lg-10,.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-wide-1,.col-lg-wide-10,.col-lg-wide-15,.col-lg-wide-2,.col-lg-wide-25,.col-lg-wide-3,.col-lg-wide-35,.col-lg-wide-4,.col-lg-wide-45,.col-lg-wide-5,.col-lg-wide-55,.col-lg-wide-6,.col-lg-wide-65,.col-lg-wide-7,.col-lg-wide-75,.col-lg-wide-8,.col-lg-wide-85,.col-lg-wide-9,.col-lg-wide-95{float:left}.col-lg-10{width:10%}.col-lg-9{width:11.1111111%}.col-lg-8{width:12.5%}.col-lg-7{width:14.2857143%}.col-lg-6{width:16.6666667%}.col-lg-5{width:20%}.col-lg-4{width:25%}.col-lg-3{width:33.3333333%}.col-lg-2{width:50%}.col-lg-1{width:100%}.col-lg-wide-10{width:10%}.col-lg-wide-9{width:90%}.col-lg-wide-8{width:80%}.col-lg-wide-7{width:70%}.col-lg-wide-6{width:60%}.col-lg-wide-5{width:50%}.col-lg-wide-4{width:40%}.col-lg-wide-3{width:30%}.col-lg-wide-2{width:20%}.col-lg-wide-15{width:15%}.col-lg-wide-95{width:95%}.col-lg-wide-85{width:85%}.col-lg-wide-75{width:75%}.col-lg-wide-65{width:65%}.col-lg-wide-55{width:55%}.col-lg-wide-45{width:45%}.col-lg-wide-35{width:35%}.col-lg-wide-25{width:25%}.img-lg-300{ width: 300px;}.img-lg-220{ width: 220px;}.img-lg-190{ width: 190px;}.img-lg-160{ width: 160px;}.img-lg-150{ width: 150px;}.img-lg-140{ width: 140px;}.img-lg-130{ width: 130px;}.img-lg-120{ width: 120px;}.img-lg-110{ width: 110px;}.img-lg-100{ width: 100px;}.img-lg-90{ width: 90px;}.img-lg-80{ width: 80px;}.img-lg-70{ width: 70px;}
	
}
@media (min-width: 1440px){		
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
	.col-lg-1,.col-lg-10,.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-wide-1,.col-lg-wide-10,.col-lg-wide-15,.col-lg-wide-2,.col-lg-wide-25,.col-lg-wide-3,.col-lg-wide-35,.col-lg-wide-4,.col-lg-wide-45,.col-lg-wide-5,.col-lg-wide-55,.col-lg-wide-6,.col-lg-wide-65,.col-lg-wide-7,.col-lg-wide-75,.col-lg-wide-8,.col-lg-wide-85,.col-lg-wide-9,.col-lg-wide-95{float:left}.col-lg-10{width:10%}.col-lg-9{width:11.1111111%}.col-lg-8{width:12.5%}.col-lg-7{width:14.2857143%}.col-lg-6{width:16.6666667%}.col-lg-5{width:20%}.col-lg-4{width:25%}.col-lg-3{width:33.3333333%}.col-lg-2{width:50%}.col-lg-1{width:100%}.col-lg-wide-10{width:10%}.col-lg-wide-9{width:90%}.col-lg-wide-8{width:80%}.col-lg-wide-7{width:70%}.col-lg-wide-6{width:60%}.col-lg-wide-5{width:50%}.col-lg-wide-4{width:40%}.col-lg-wide-3{width:30%}.col-lg-wide-2{width:20%}.col-lg-wide-15{width:15%}.col-lg-wide-95{width:95%}.col-lg-wide-85{width:85%}.col-lg-wide-75{width:75%}.col-lg-wide-65{width:65%}.col-lg-wide-55{width:55%}.col-lg-wide-45{width:45%}.col-lg-wide-35{width:35%}.col-lg-wide-25{width:25%}.img-lg-300{ width: 300px;}.img-lg-220{ width: 220px;}.img-lg-190{ width: 190px;}.img-lg-160{ width: 160px;}.img-lg-150{ width: 150px;}.img-lg-140{ width: 140px;}.img-lg-130{ width: 130px;}.img-lg-120{ width: 120px;}.img-lg-110{ width: 110px;}.img-lg-100{ width: 100px;}.img-lg-90{ width: 90px;}.img-lg-80{ width: 80px;}.img-lg-70{ width: 70px;}
	
}
@media (min-width: 1600px){	
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
}

@media (max-width: 1199px) and (min-width: 1023px){
	.visible-md { display: block !important;}
	.hidden-md { display: none!important;}
	.visible-inline-md { display: inline-block !important;}
	.visible-text-md { visibility: visible !important;}
	.hidden-text-md { visibility: hidden !important;}
}

@media (max-width: 1023px) and (min-width: 767px){	
	.visible-sm { display: block !important;}
	.hidden-sm { display: none !important;}	
	.visible-inline-sm { display: inline-block !important;}
	.visible-text-sm { visibility: visible !important;}
	.hidden-text-sm { visibility: hidden !important;}
}


	
@media (max-width: 767px){	
	
	.visible-xs { display: block !important;}
	.hidden-xs {display: none!important;}
	.visible-inline-xs { display: inline-block !important;}
	.visible-text-xs { visibility: visible !important;}
	.hidden-text-xs {visibility: hidden !important;}
			
	/* all */	
	body{ font-size: 12px; line-height: 20px;}	
	
	/* text */
	h1{ font-size:24px;}
	h2{ font-size:20px;}
	h3{ font-size:18px;}
	h4{ font-size:16px;}
	h5{ font-size:14px;}
	h6{ font-size:12px;}
	
	
	
}



使用方法:col-lg-8 col-md-6 col-sm-4 col-xs-3

代表超大屏幕显示8列  中大屏幕显示6列  小屏幕4列  手机端3列, 


推荐技术资料

css字体渐变颜色和背景渐变颜色实现方法

2023-05-09

css字体渐变颜色background-image:-webkit-linear-gradient(bottom,#fb1919,#fd8403,#75751e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;这里要注意。如果设置了这个。css字体移动样式也要设置。不然普通字体移动变色。没有效果,css背景渐变颜色代码如下:background-image: linear-gradient(140d

阅读更多

批量替换文件里的所有注释,正则表达式模式:

2024-01-07

当你使用EditPlus进行批量替换时,可以使用以下正则表达式来匹配和删除HTML文件中的注释:正则表达式模式:<!--[\s\S]*?-->上面用表达式可以批量替换文件里的所有注释

阅读更多

Ajax发送订单信息,会遇到发送了一次,然后在点击发送,不成功的问题,

2024-07-18

根据你提供的代码,看起来你正在使用Ajax来发送订单信息到一个PHP页面,并期望通过PHP页面发送电子邮件。如果第一次发送成功,但第二次发送失败,可能有几个原因需要检查和排除:重复发送问题: 确保每次发送请求时,checkoutString 的内容是正确的,并且你没有意外地覆盖了其他数据。服务器响应问题: 确保PHP页面 http://ww

阅读更多

网站LOGO图片 图标手机端模糊问题解决办法

2025-06-25

今天帮客户定制网站,发现一个奇怪的问题,就是logo图片或者图标定的大小是139*55,然后logo图片我们就把他处理成这个大小。按道理不存在放大缩小的问题。但是实际上电脑端没有问题。很清楚,手机端他看起来就是有点模糊,然后我开始把他转成svg矢量图。还是模糊,于是找资料也没找到。然后我就把logo图片直接用大图。不去处

阅读更多

pboot:tags标签 显示当前页面的 tags

2021-10-18

直接写id参数当前页的{content:id}就行了。{pboot:tags id={content:id}}&nbsp;<a href='[tags:link]' class='tagc[field:highlight /]'>[tags:text]</a>{/pboot:tags}

阅读更多

解决移动端。Safari悬停效果(:hove移动效果)需要点击二次,才能实现跳转或者点击事件弹窗

2023-08-14

解决方案是从css中删除:hover状态,考虑一下,移动浏览器不应该有:hover状态,因为没有悬停。如果您想在桌面上保持悬停状态,可以使用media 来判断pc端,如下所示@media (min-width: 992px) { .button:hover { background: '#fff' }}

阅读更多

pbootcms幻灯片新增一个手机图片上传字段

2024-07-01

首先到数据库【ay_slide】表中新增一个轮播图字段,我加得是Mpic找到路径:/apps/admin/controller/content/下找到SlideContrller.php文件找到代码:// 轮播图增加,添加【picc】这个新增的数据字段名称,该文件共需要新增四处,可以对照其他字段进行添加如图,下面修改数据 得地方也改下。然后修改模板文件,/apps/ad

阅读更多

网站调用Noto Sans SC字体。让字体变好看。告别默认字体太细

2025-08-02

网站调用Noto Sans SC字体。让字体变好看。告别默认字体太细,调用这个。基本上和设计稿上面的字体差不多的。 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">body,a { font-family: "Noto

阅读更多

pbootcms 左侧产品栏目 高亮判断方法

2021-12-02

主要是这段代码。官方演示的不行{pboot:if('[nav:scode]'=='{sort:scode}')}left_active{/pboot:if} {pboot:nav num=6 parent=2} <li><a class="biglink {pboot:if('[nav:scode]'=='{sort:scode}'

阅读更多