Реагировать Bootstrap столбец не отображается горизонтально - PullRequest
Новая
       11

Реагировать Bootstrap столбец не отображается горизонтально

0 голосов
/ 23 февраля 2020

Я создаю приложение реагирования, и у меня возникают проблемы с отображением столбцов реагирования - 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>
  );
}

1 Ответ

0 голосов
/ 23 февраля 2020

Необходимо добавить отображение: flex in 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>
  );
}
...