我想让我的Swiper滑块在React.js中响应我正在使用Swiper React组件，我是新来的。我已经在css中添加了相同宽度的媒体查询，并添加了相同宽度的组件断点。但仍然存在问题，它没有响应，并在右侧添加了一些空间。
above 576px breakpoint look like this
above 768px breakpoint look like this
我很感激你的帮助。
滑块组件：

import React from "react";
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "./mainslider.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

const MainSlider = () => {
  return (
    <Swiper
      // install Swiper modules
      breakpoints={{
        576: {
          width: 576,
          slidesPerView: 2,
        },
        768: {
          width: 768,
          slidesPerView: 1,
        },
      }}
      modules={[Navigation, Pagination]}
      spaceBetween={0}
      slidesPerView={1}
      navigation
      // pagination={{ clickable: true }}
      // scrollbar={{ draggable: true }}
      // onSwiper={(swiper) => console.log(swiper)}
      // onSlideChange={() => console.log("slide change")}
    >
      <SwiperSlide className="bg-color1">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_5916d66c114c4a3fb055fd0fff15f402~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Valencia Orange</h1>
              <p className="paragraph mb-2">
                Valencia Orange is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide className="bg-color2">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_ecb14379435e405996be56ad460df8d0~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Lean Green</h1>
              <p className="paragraph mb-2">
                Lean Green is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide className="bg-color3">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_efd3336ca11743f796271887c60c2dd1~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Pomegranate</h1>
              <p className="paragraph mb-2">
                Pomegranate is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  );
};

export default MainSlider;

SWIPER CSS：我还在媒体查询中添加了. swiper-container类。

.swiper {
  height: auto;
}
.swiper .swiper-slide {
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.swiper .swiper-slide.bg-color1 {
  background-color: #d6b404;
}
.swiper .swiper-slide.bg-color2 {
  background-color: #7fca83;
}
.swiper .swiper-slide.bg-color3 {
  background-color: #ff8888;
}
.swiper .img-fluid {
  width: 25%;
}

@media screen and (min-width: 576px) {
  .swiper-container {
    width: 576px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}

@media (min-width: 992px) {
  .swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
}