css 移动设备上的2x2列

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 移动设备上的2x2列相关的知识，希望对你有一定的参考价值。

/*-----------------[Start 2x2 column on mobile]----------------*/

@media (max-width: 980px) {
.flex-columns .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; }
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50% !important; } 
}
@media (max-width: 479px) {
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; } 
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50% !important; }
}

/*-----------------[End 2x2 column on mobile]----------------*/

以上是关于css 移动设备上的2x2列的主要内容，如果未能解决你的问题，请参考以下文章

css 移动设备上的突出反向列顺序

从引导网格列到轮播

如何使用 Flexbox 将 4 个图像划分为 2x2 网格？

Bootstrap：移动显示上的列之间的差距