如何将map()生成的数组元素对齐为9行5列布局？

要实现9行5列的布局，核心是把45个复选框按每5个一组拆分，每组对应一行，利用Bootstrap的Row和Col组件来规范列布局。以下是修改后的代码：

import React from 'react';
import { Row, Col, Form, Container } from 'react-bootstrap';

const KlassiSelector = () => {
    const ArrayKlassis = [];
    for(let i=1; i<46; i++){
        ArrayKlassis.push(i);
    }

    // 将数组按每5个元素一组拆分
    const groupedKlassis = [];
    for (let i = 0; i < ArrayKlassis.length; i += 5) {
        groupedKlassis.push(ArrayKlassis.slice(i, i + 5));
    }

    return (
        <Container className="m-2">
            {/* 遍历每组，每组对应一行 */}
            {groupedKlassis.map((rowItems, rowIndex) => (
                <Row key={`row-${rowIndex}`} className="justify-content-md-center mb-2">
                    {/* 遍历当前行的每个元素，每个元素占一列 */}
                    {rowItems.map((item, colIndex) => (
                        <Col key={`col-${rowIndex}-${colIndex}`} className="d-flex justify-content-center">
                            <Form.Check 
                                label={`${item}`} 
                                name="group1" 
                                type="checkbox" 
                                id={`inline-checkbox-${item}`}
                            />
                        </Col>
                    ))}
                </Row>
            ))}
        </Container>
    );
};

export default KlassiSelector;

关键修改点： #

1. 数组分组：通过循环将原数组拆分为9个子数组，每个子数组包含5个元素，对应一行的内容。
2. 双层遍历渲染：外层遍历分组后的数组生成Row组件，内层遍历每组元素生成Col组件，每个Col包裹一个复选框。
3. 布局优化：使用justify-content-md-center让每行内容居中，mb-2给行添加间距，d-flex justify-content-center让每个复选框在列内居中对齐。
4. 移除多余嵌套：去掉了原代码中不必要的外层Row和嵌套div，改用Container作为根容器更符合Bootstrap的布局规范。

如果不需要严格的栅格列控制，也可以用flex-wrap实现自动换行，只需将所有复选框放在一个启用了flex-wrap的容器中，并设置每个复选框的宽度占比，但用Row+Col的方式更贴合Bootstrap的设计理念，布局稳定性更强。

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