css Beaver Builder主题博客的网格布局只需一个简单的步骤

Posted 2021-05-13

@media only screen and (min-width: 992px) {
	
	/* BLOG LAYOUT TO CONVERT IT TO A GRID with 2 blog posts across the row */
	.fl-archive .fl-post{width:48%;float:left;margin-left:4%;}
	.fl-archive .fl-post:nth-child(odd){margin-left:0;clear:both;}

}

@media only screen and (min-width: 1200px) {

	/* BLOG LAYOUT TO CONVERT IT TO A GRID with 3 blog posts across the row */
	.fl-archive .fl-post{width:30%;float:left;margin-left:5%;}
	.fl-archive .fl-post:nth-child(odd){margin-left:5%;clear:none;}
	.fl-archive .fl-post:nth-child(3n+1){margin-left:0;clear:both;}

}