最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

css - How to align Card(bootstrap) heights in SwiperSlide(swpier.js) - Stack Overflow

programmeradmin3浏览0评论

I'm trying to align the height of Card (bootstrap) in SwiperSlide (swpier.js) so that they have the same height, I tried several things but nothing worked.

<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>

Are there any other systems that can fix this? I use the latest things

I'm trying to align the height of Card (bootstrap) in SwiperSlide (swpier.js) so that they have the same height, I tried several things but nothing worked.

<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>

Are there any other systems that can fix this? I use the latest things

Share Improve this question asked Jan 17 at 15:25 mark88mark88 513 bronze badges 1
  • I tried your code. It is working fine for me. If you still have this issue try to set align-items:stretch to .swiper-slide element. – Raghavendra N Commented Jan 18 at 5:42
Add a comment  | 

1 Answer 1

Reset to default 0

try this code:

<div class="swiper-slide h-auto">
  <div class="w-100 h-100">
      <div class="card h-100">
          <img src="..." class="" alt="...">
          <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
  </div>
发布评论

评论列表(0)

  1. 暂无评论