如何用Bootstrap将UL/LI列表转为响应式网格（适配WordPress）

嘿，我刚好处理过类似的需求，给你一套完全原生、不需要hack的方案，完美适配WordPress的wp_list_pages输出：

首先，先处理wp_list_pages的输出，给生成的UL添加一个自定义类，这样我们可以精准定位样式：

<?php
// 输出页面列表，给UL添加page-grid类，隐藏默认标题
echo wp_list_pages(array(
    'echo' => false,
    'title_li' => '', // 去掉默认的<li>标题
    'class' => 'page-grid' // 给UL添加自定义类
));
?>

接下来用CSS实现响应式布局，这里提供两种方案，选你喜欢的就行：

方案1：CSS Grid（推荐，更简洁） #

Grid是现代CSS布局的首选，代码简洁且控制力强：

/* 基础网格样式 */
.page-grid {
  list-style: none; /* 去掉默认列表符号 */
  padding: 0;
  margin: 0;
  display: grid;
  /* 自动填充列，最小宽度280px，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem; /* 网格项之间的间距 */
}

/* 移动端适配：屏幕小于768px时改为单列 */
@media (max-width: 767px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
}

方案2：CSS Flexbox（兼容更老浏览器） #

如果需要兼容一些不支持Grid的旧浏览器，Flexbox是可靠的替代方案：

/* 基础Flex布局 */
.page-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 1.5rem;
}

.page-grid li {
  /* 允许伸缩，最小宽度280px，剩余空间自动分配 */
  flex: 1 1 280px;
}

/* 移动端单列 */
@media (max-width: 767px) {
  .page-grid li {
    flex: 1 1 100%; /* 占满整个容器宽度 */
  }
}

为什么这是“非workaround”的解决方案？ #

• 完全基于wp_list_pages原生参数添加类，没有用过滤器强行修改HTML结构，属于官方支持的用法
• 用CSS原生布局方案（Grid/Flexbox），没有依赖第三方框架或hack手段，代码干净可维护
• 移动端适配完全通过媒体查询实现，逻辑清晰，符合响应式设计的最佳实践

你可以根据自己的设计需求调整minmax的数值、gap大小，或者给LI添加额外的样式（比如卡片效果），完全不影响布局逻辑。

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