如何在react-bootstrap中实现响应式卡片堆叠效果？

直接上可运行的方案，结合React状态管理和CSS动画，完美适配Container fluid、Row、Col的栅格体系：

核心实现代码 #

1. 组件结构与逻辑 #

import { useState, useEffect, useRef } from 'react';
import { Container, Row, Col, Card } from 'react-bootstrap';

const StackedCards = () => {
  const [expandedIndex, setExpandedIndex] = useState(null);
  const [cardOffset, setCardOffset] = useState(30); // 堆叠时的偏移量
  const cardsRef = useRef([]);

  // 响应式调整偏移量
  useEffect(() => {
    const handleResize = () => {
      setCardOffset(window.innerWidth < 768 ? 15 : 30);
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleCardClick = (index) => {
    setExpandedIndex(expandedIndex === index ? null : index);
  };

  const cardsData = [
    { title: '卡片1', text: '这是第一张堆叠卡片的内容' },
    { title: '卡片2', text: '这是第二张堆叠卡片的内容' },
    { title: '卡片3', text: '这是第三张堆叠卡片的内容' },
    { title: '卡片4', text: '这是第四张堆叠卡片的内容' }
  ];

  return (
    <Container fluid className="py-5">
      <Row className="justify-content-center">
        <Col md={8} lg={6}>
          <div className="stacked-cards-container" style={{ position: 'relative', minHeight: '300px' }}>
            {cardsData.map((card, index) => (
              <Card
                key={index}
                ref={el => cardsRef.current[index] = el}
                className={`stacked-card ${expandedIndex === index ? 'expanded' : ''}`}
                onClick={() => handleCardClick(index)}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  transform: expandedIndex === null 
                    ? `translateY(${index * cardOffset}px) translateX(${index * 10}px)` 
                    : expandedIndex === index
                      ? 'translateY(0) translateX(0)'
                      : index < expandedIndex
                        ? `translateY(-${(expandedIndex - index) * cardOffset}px) translateX(-${(expandedIndex - index) * 10}px)`
                        : `translateY(${(index - expandedIndex) * cardOffset}px) translateX(${(index - expandedIndex) * 10}px)`,
                  zIndex: expandedIndex === null ? cardsData.length - index : expandedIndex === index ? cardsData.length : expandedIndex > index ? cardsData.length - (expandedIndex - index) : cardsData.length - (index - expandedIndex),
                  transition: 'all 0.3s ease'
                }}
              >
                <Card.Body>
                  <Card.Title>{card.title}</Card.Title>
                  <Card.Text>{card.text}</Card.Text>
                </Card.Body>
              </Card>
            ))}
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default StackedCards;

2. 配套CSS #

.stacked-card {
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: none;
  border-radius: 8px;
}

.stacked-card.expanded {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* 移动端适配：避免卡片溢出视口 */
@media (max-width: 767px) {
  .stacked-cards-container {
    padding: 0 15px;
  }
}

关键细节说明 #

• 栅格适配：通过Col md={8} lg={6}控制卡片容器的响应式宽度，内部卡片设width: 100%自动继承容器尺寸
• 响应式偏移：监听窗口尺寸动态调整堆叠偏移量，移动端缩小偏移避免卡片溢出
• 状态控制：用expandedIndex记录展开的卡片索引，通过条件判断transform和z-index实现堆叠/展开的位置切换
• 平滑动画：添加transition属性让卡片移动、层级变化更自然

这个方案完全兼容React-Bootstrap的栅格系统，点击卡片可切换展开/收起状态，全终端自适应显示。

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