如何使用Bootstrap将列表项拆分为2列2行的响应式布局？

完全可以实现你想要的布局，结合Bootstrap工具类和少量自定义CSS就能搞定，无需重构现有HTML结构。以下是两种可行方案：

方案1：CSS Grid（推荐，适配你的布局需求） #

利用Grid的二维布局特性精准控制列表项位置：

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<ul class="d-grid grid-cols-1 md:grid-cols-2 gap-3 p-0 list-unstyled">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

自定义CSS #

/* Bootstrap md断点（768px）及以上生效 */
@media (min-width: 768px) {
    ul li:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    ul li:nth-child(2) {
        grid-row: 2;
        grid-column: 1;
    }
    ul li:nth-child(3) {
        grid-row: 1;
        grid-column: 2;
    }
    ul li:nth-child(4) {
        grid-row: 2;
        grid-column: 2;
    }
}

关键说明 #

• d-grid：将ul转为Grid容器
• grid-cols-1：小屏幕下单列纵向堆叠
• md:grid-cols-2：中等屏幕及以上切换为双列
• gap-3：控制列表项间距（可按需调整）
• 媒体查询通过grid-row/grid-column指定每个项的网格位置，实现item1+item3在上行、item2+item4在下行的布局

方案2：Flexbox（备选方案） #

通过Flex的排序和换行特性实现布局：

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<ul class="d-flex flex-wrap md:flex-col p-0 list-unstyled">
    <li class="md:order-1 w-100 md:w-50">item 1</li>
    <li class="md:order-3 w-100 md:w-50">item 2</li>
    <li class="md:order-2 w-100 md:w-50">item 3</li>
    <li class="md:order-4 w-100 md:w-50">item 4</li>
</ul>

关键说明 #

• 小屏幕下flex-wrap让列表项自动换行堆叠
• 中等屏幕下切换为flex-col，通过order类调整项的显示顺序，配合w-50实现每行两个项

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