React Bootstrap列未水平显示

Question

我正在构建一个React应用，但在使react-bootstrap列水平显示时遇到了问题。我希望图片显示在文字上方而不是上方。我不知道我在做什么错。下面是我的代码：

function About() {
  return (
    <Container fluid  className="about-us">
      <Row>
        <Col sm={4}>
            <Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
        </Col>
        <Col sm={4}>
            <h2>Meet The Team</h2>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
                deserunt mollit anim id est laborum."
            </p>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
                deserunt mollit anim id est laborum."
            </p>
        </Col>
      </Row>
    </Container>
  );
}

Answer 1

需要添加显示：在CSS中灵活显示行

  return (
    <Container fluid  className="about-us">
      <Row style={{display:"flex"}}>
        <Col sm={4}>
            <Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
            </Col>
            <Col sm={4}>
            <h2>Meet The Team</h2>
            <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
            deserunt mollit anim id est laborum."
            </p>
            <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
            deserunt mollit anim id est laborum."
            </p>
        </Col>
      </Row>
    </Container>
  );
}