React.js 中的图像和文本滑块响应问题

Question

我正在制作一个关于 React js 的网站。我不知道如何用文本实现响应式图像滑块。

我试着像浏览器一样做。但是为了响应，我认为图像和文本应该垂直对齐！

  class Projects extends React.Component {
      constructor() {
       super();
                    }

    render() {
    return (
     <StyledContainer>
       <div className="container">
           <div className="projectSlideDiv">
           <h2 className="headerProjectSlide">OUR SUCCESSFUL 
          PROJECTS</h2>
           <h3 className="titleIntroProjectSlide">
          WE CRAFT YOUR PROJECT WITH CARE
        </h3>
        <div className="paraProjectSlide">
          Our main focus is to make the User Experience very simple and
          easy.
        </div>
        <p className="paraProjectSlide">Simplicity is our Strength.</p>
       </div>

      <Carousel showArrows={false} showThumbs={false} showStatus={false}>
        <div>
          <div className="projectSlide">
            <div className="firstHalfSlide">
              <img src={sliderImage} />
            </div>

            <div className="secondHalfSlide">
              <h3 className="titleProjects">E-COMMERCE WEBSITE</h3>
              <h2 className="projectName">Nextgen E-Commerce</h2>
              <p className="paraProjectText">
                Nextgen UI is all about a smart solution for clothing
                business. It's a great solution for a e- commerce 
                 business.
                It care about our customer and satisfy their need with 
                easy
                solutions.Nextgen UI is all about a smart solution for
                clothing business. It's a great solution for a e-commerce
                business. It care about our customer and satisfy their 
                need
                with easy solutions.
              </p>

              <div className="readmoreBtnPosition">
                <div class="readmoreBtn">Read More</div>
              </div>
            </div>
          </div>                  
        </div>

           <div>
            <img src="" />
          </div>
        </Carousel>
       </div>
     </StyledContainer>
     );
    }
   }

我已经给出了我创建的响应部分

CSS： 这是我尝试过的css。任何人都可以提出任何建议吗？我应该写什么媒体查询来解决这个问题？

@media ${screenSize.size650} {
   .projectSlideDiv {
     margin-bottom: 20px;
  }

   .headerProjectSlide {
     padding: 4px 4px;
     font-size: 0.7em;
     text-align: center;
   }

   .titleIntroProjectSlide {
     padding: 9px 1px;
     font-size: 0.8em;
     margin: 1px 8px;
     text-align: center;
   }

  .paraProjectSlide {
    padding: 3px 0px;
    font-size: 0.6em;
    margin: 1px 2px;
  }

  .firstHalfSlide {
    margin: 1px;
  }
}

Answer 1

您必须使用 react-bootstrap 包来创建响应式 Web 应用程序。 通过这个：https://www.npmjs.com/package/react-bootstrap