You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让SwiperSlide中的Bootstrap Card高度统一?

如何让SwiperSlide内的Bootstrap Card保持等高?

我尝试让SwiperSlide组件中的Bootstrap Card保持相同高度,试过多种方法但都没效果,当前使用的是最新版本的相关技术。以下是我的代码:

<Container>
      <Swiper
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        spaceBetween={50}
        slidesPerView={2}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
      >
        <SwiperSlide>
          <Card border="success" className="text-center h-100">
            <Card.Body>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content. Some quick example text to build
                on the card title and make up the bulk of the card's content.
                Some quick example text to build on the card title and make up
                the bulk of the card's content. Some quick example text to build
                on the card title and make up the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </SwiperSlide>
        <SwiperSlide>
          <Card border="success" className="text-center h-100">
            <Card.Body>
              <Card.Text>Some</Card.Text>
            </Card.Body>
          </Card>
        </SwiperSlide>
        <SwiperSlide>
          <Card border="danger" className="text-center">
            <Card.Body>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </SwiperSlide>
        <br />
      </Swiper>
    </Container>

可行解决方案:

  • 给所有SwiperSlide添加h-100类,确保slide容器本身撑满父级高度:
    <SwiperSlide className="h-100">
      <Card border="success" className="text-center h-100">
        <!-- 卡片内容 -->
      </Card>
    </SwiperSlide>
    
  • 确保所有Card都加上h-100类,你提供的代码里第三个Card遗漏了该类,必须补上。
  • 如果以上方法无效,给Swiper的slide容器强制设置flex布局,添加自定义CSS:
    .swiper-slide {
      display: flex !important;
    }
    
    该样式会让slide内部的Card自动填充slide的高度,配合Card的h-100即可实现完全等高。
  • 排查项目中的自定义CSS,确认没有给Swiper、slide或Card设置height、min-height、overflow等可能破坏等高布局的属性。

内容的提问来源于stack exchange,提问作者mark88

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 21:53:29