react-bootstrap 卡片网格布局

最新推荐文章于 2025-05-13 11:46:42 发布

原创

最新推荐文章于 2025-05-13 11:46:42 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #bootstrap #javascript

本文介绍了一个使用React及React-Bootstrap库实现的卡片布局示例，通过动态生成包含不同内容的卡片来展示响应式网格系统。示例中演示了如何设置卡片的数量、间距以及动态内容。

md={4} 代表每行显示4个卡片

g-2 代表卡片间的间距

import React, { useState, useEffect } from 'react';
import {
  Container,
  Row,
  Col,
  Stack,
  Form,
  Button,
  Alert,
  ToggleButtonGroup,
  ToggleButton,
  ButtonToolbar,
  ButtonGroup,
  InputGroup,
  FormControl,
  Dropdown,
  DropdownButton,
  Card,
} from 'react-bootstrap';

function LoadingButton() {
  const [value, setValue] = useState([1, 3]);

  /*
   * The second argument that will be passed to
   * `handleChange` from `ToggleButtonGroup`
   * is the SyntheticEvent object, but we are
   * not using it in this example so we will omit it.
   */
  const handleChange = (val) => setValue(val);

  return (
    <div className="m-test-wrap">
      <Row md={4} className="g-2">
        {Array.from({ length: 8 }).map((_, idx) => (
          <Col key={idx}>
            <Card>
              <Card.Body>
                <Card.Title>Card title{idx + 1}&l