Oracle APEX Cards Column组件移动端如何从单栏调整为双栏布局

以下是可直接落地的修改步骤：

• 首先进入对应Cards组件的属性配置页，在「外观」分类下的CSS类输入框中添加自定义类名：custom-cards-2col-mobile
• 打开当前页面的属性面板，找到「CSS → 内联」配置项，粘贴如下适配代码：

/* 适配768px以下的移动端设备 */
@media only screen and (max-width: 767px) {
  .custom-cards-2col-mobile .t-Cards {
    /* 核心配置：将移动端默认1列栅格改为2列 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  .custom-cards-2col-mobile .t-Card {
    margin: 0 !important;
  }
}

• 如果你使用的是旧版非Universal Theme主题，可替换为flex布局适配代码：

@media only screen and (max-width: 767px) {
  .custom-cards-2col-mobile .t-Cards {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .custom-cards-2col-mobile .t-Cards-item {
    width: calc(50% - 6px) !important;
    margin: 0 3px 12px 3px !important;
  }
}

配置完成后清空浏览器缓存再测试移动端效果，若觉得卡片内容过挤，可将媒体查询的max-width阈值调整为更小值（如576px），仅在小屏手机上触发双列布局。

效果参考：
当前默认移动端单列效果：
期望实现的移动端双列效果：

内容的提问来源于stack exchange，提问作者Granedoy