bootstrap栅格布局五等分/八等分(参考Bootstrap的栅格写法)

2021年9月20日 3点热度 0条评论 来源: Hao-Z-Y

五等分:

<style type="text/css">
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
	position: relative;
	min-height: 1px;
	margin-right: 10px;
	margin-left: 10px;

}

.col-xs-1-5 {
	width: 18%;
	float: left;
}

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

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

@media (min-width: 1200px) {
	.col-lg-1-5 {
		width: 18%;
		float: left;
	}
}
</style>

八等分:

<style type="text/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;
	}
}

</style>

 

    原文作者:Hao-Z-Y
    原文地址: https://blog.csdn.net/weixin_41634608/article/details/82988182
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。