如何让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:
该样式会让slide内部的Card自动填充slide的高度,配合Card的.swiper-slide { display: flex !important; }h-100即可实现完全等高。 - 排查项目中的自定义CSS,确认没有给Swiper、slide或Card设置
height、min-height、overflow等可能破坏等高布局的属性。
内容的提问来源于stack exchange,提问作者mark88
相关产品推荐
相关产品推荐

