从数据库取未知数量数据，如何实现4列从上到下排列展示？

你可以用两种方式实现需求，其中借助Bootstrap+CSS列布局的方法最便捷，无需手动计算元素数量；如果需要更精细的列控制，再考虑手动分组的方案。

一、便捷实现：Bootstrap + CSS 列布局 #

直接利用CSS的column-count属性配合Bootstrap的容器，就能自动实现从上到下填充的4列布局，不用操心元素数量计算。

示例代码 #

<!-- Bootstrap容器 -->
<div class="container mt-4">
  <!-- 列布局父容器 -->
  <div class="column-grid">
    <!-- 循环渲染数据项（实际从数据库获取后循环生成） -->
    <div class="data-item p-3 mb-3 border rounded">1</div>
    <div class="data-item p-3 mb-3 border rounded">2</div>
    <div class="data-item p-3 mb-3 border rounded">3</div>
    <div class="data-item p-3 mb-3 border rounded">4</div>
    <div class="data-item p-3 mb-3 border rounded">5</div>
    <div class="data-item p-3 mb-3 border rounded">6</div>
    <div class="data-item p-3 mb-3 border rounded">7</div>
    <div class="data-item p-3 mb-3 border rounded">8</div>
    <div class="data-item p-3 mb-3 border rounded">9</div>
    <div class="data-item p-3 mb-3 border rounded">10</div>
    <div class="data-item p-3 mb-3 border rounded">11</div>
  </div>
</div>

<style>
.column-grid {
  /* 设置4列 */
  column-count: 4;
  /* 列间距，也可以用Bootstrap的间距类替代 */
  column-gap: 1rem;
}
.data-item {
  /* 防止单个数据项被拆分到两列 */
  break-inside: avoid;
}
</style>

说明 #

• 浏览器会自动将数据项按列填充，先填满第一列，再依次填充后面的列，完全符合你要的从上到下的排列效果。
• break-inside: avoid用来保证单个数据项的完整性，不会被列分割成两部分。
• Bootstrap的container用来控制整体布局宽度，间距可以通过CSS或Bootstrap内置的间距类调整。

二、手动分组实现（按需使用） #

如果需要对每列单独设置逻辑或样式，可以手动计算每列的元素数量，将数据分割成4组后用Bootstrap栅格布局展示。

示例代码（以JavaScript为例） #

<div class="container mt-4">
  <div class="row" id="data-container">
    <!-- 动态生成列 -->
  </div>
</div>

<script>
// 从数据库获取的数组
const dataList = [1,2,3,4,5,6,7,8,9,10,11];
const columnNum = 4;
// 计算每列最少要放的元素数（向上取整）
const itemsPerColumn = Math.ceil(dataList.length / columnNum);
const container = document.getElementById('data-container');

// 循环生成4列
for (let i = 0; i < columnNum; i++) {
  const column = document.createElement('div');
  // 用Bootstrap栅格，4列每列占3份（12/4=3）
  column.className = 'col-3';
  // 计算当前列的元素起始索引
  const startIdx = i * itemsPerColumn;
  // 截取当前列的元素
  const columnItems = dataList.slice(startIdx, startIdx + itemsPerColumn);
  
  // 生成数据项
  columnItems.forEach(item => {
    const itemDiv = document.createElement('div');
    itemDiv.className = 'p-3 mb-3 border rounded';
    itemDiv.textContent = item;
    column.appendChild(itemDiv);
  });
  
  container.appendChild(column);
}
</script>

说明 #

• 先计算每列需要容纳的元素数（总元素数除以4后向上取整），再将原数组分割成4个小组，每个小组对应一列。
• 用Bootstrap的col-3实现4列均分布局，每列内部依次放置对应的数据项，最终呈现的效果和需求一致。

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