如何在Bootstrap Vue中实现API数据渲染的2列网格布局

以下提供3种不同技术栈的实现方式，都可以直接适配你v-for循环渲染的列表场景：

方案1：原生CSS Grid实现（无框架依赖，最简便） #

直接给v-for的父容器加Grid布局样式即可，自动实现每行2个元素、超出自动换行的效果：

/* 父容器样式 */
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定每行2列，列宽均分 */
  gap: 16px; /* 行列间距，可根据需求自定义 */
}

Vue模板示例：

<template>
  <div class="grid-wrapper">
    <div v-for="(item, index) in apiDataList" :key="index">
      -- item {{ index + 1 }} --
    </div>
  </div>
</template>

方案2：Bootstrap栅格系统实现 #

如果项目已经引入Bootstrap，直接用自带的栅格类即可，无需额外写CSS：

<template>
  <!-- row是Bootstrap自带的flex容器 -->
  <div class="row gx-3 gy-3"> 
    <!-- col-6代表占12栅格的6格，刚好一行2个 -->
    <div class="col-6" v-for="(item, index) in apiDataList" :key="index">
      -- item {{ index + 1 }} --
    </div>
  </div>
</template>

其中gx-3、gy-3是Bootstrap自带的间距类，可根据需求调整数值。

方案3：CSS Flex实现 #

如果习惯用Flex布局也可以通过设置换行规则实现：

.flex-wrapper {
  display: flex;
  flex-wrap: wrap; /* 超出自动换行 */
  gap: 16px;
}
.flex-item {
  /* 无gap的情况直接写width: 50%即可 */
  width: calc(50% - 8px); 
}

Vue模板示例：

<template>
  <div class="flex-wrapper">
    <div class="flex-item" v-for="(item, index) in apiDataList" :key="index">
      -- item {{ index + 1 }} --
    </div>
  </div>
</template>

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