Bootstrap栅格系统一行5列或8列
web Bootstrap 2019-07-05 5344 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

3715078 2275 32
最新评论
<script>alert(11)</script>
评 留言
:kaixin: :haha:
评 phpExcel列数据自动换行的方法->getAlignment()->setWrapText(true);
666 :kaixin:
评 return和return false的区别
楼主很给力,请教了有一个问题,很细心给我解答,还帮我解决了问题。 :zhenbang: :zhenbang: :zhenbang:
评 留言
厉害 :zhenbang: :zhenbang: :zhenbang:
评 留言
文章标签更多
ThinkPHP (240)
Mysql (48)
DedeCms (33)
jQuery (58)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

Bootstrap栅格系统一行5列或8列怎么实现?

Bootstrap栅格系统五等分或八等分?

在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。 
要2等分,使用col-md-6即可; 
要3等分,使用col-md-4即可; 
要4等分,使用col-md-3即可; 
要6等分,使用col-md-2即可。 
但如果我们要5等分或者8等分怎么办呢?

直接使用Bootstrap是不方便进行5等分或者8等分的,但是我们可以参考Bootstrap的栅格写法,来自己写css实现5等分或者8等分。 
这里以8等分为例,使用如下css即可:

.col-xs-1-8,.col-sm-1-8,.col-md-1-8,.col-lg-1-8 {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

.col-xs-1-8 {
  width: 12.5%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-8 {
    width: 12.5%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-8 {
    width: 12.5%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-8 {
    width: 12.5%;
    float: left;
  }
}
5等分:

<style type="text/css">
		/* define bootstrap 5 columns */
		.col-xs-1-5,
		.col-sm-1-5,
		.col-md-1-5,
		.col-lg-1-5 {
			position: relative;
			min-height: 1px;
			padding-right: 10px;
			padding-left: 10px;
		}
 
		.col-xs-1-5 {
			width: 20%;
			float: left;
		}
 
		@media (min-width: 768px) {
		.col-sm-1-5 {
				width: 20%;
				float: left;
			}
		}
		@media (min-width: 992px) {
			.col-md-1-5 {
				width: 20%;
				float: left;
			}
		}
		@media (min-width: 1200px) {
			.col-lg-1-5 {
				width: 20%;
				float: left;
			}
		}
</style>

版权声明:本篇文章来源于网络。 来源链接

相关推荐
AdminLTE管理后台提示框,bootstrap框架提示框Tooltip
Bootstrap | 2018-08-16 10216
AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法: html代码: <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...
bootstrap修改col的间距
Bootstrap | 2019-09-11 6998
用bootstrap布局时会产生一些问题,比如col水平间距过大 修改方法: 重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现,col每列之间之所以有间距,是因为col里面的左右内边距都是15px形成的,这样...
评论:0条
评论加载中...
发表评论