Блог

Главная - Вопросы по программированию - Как присвоить строкам в контейнере bootstrap 4 общую высоту, равную высоте столбца

Как присвоить строкам в контейнере bootstrap 4 общую высоту, равную высоте столбца

#reactjs #bootstrap-4

#reactjs #bootstrap-4

Вопрос:

Если у меня есть такой контейнер, как я могу сделать так, чтобы строки во втором столбце увеличивали их высоту, чтобы они в целом соответствовали высоте в первом столбце :

       <Container fluid>
        <Row>
          <Col>
            Only row in first column
            <img src="bigPhoto.png" />
          </Col>
          <Col >
            <Row>
                First row in second column
            </Row>
            <Row>
                Second row in second column
            </Row>
            <Row>
                Third row in second column
            </Row>
            <Row>
                Fourth row in second column
            </Row>
          </Col>
        </Row>
      </Container>

Ответ №1:

Вы можете добавить display:flex к родительскому компоненту.

 .parent{
  display:flex;
  border:1px solid red;
}

Row, Col {
  border: 2px solid black;
 }  
 <Container fluid>
        <Row class="parent">
          <Col>
            Only row in first column
            <img src="https://picsum.photos/id/100/100/200" />
          </Col>
          <Col >
            <Row>
                First row in second column
            </Row>
            <Row>
                Second row in second column
            </Row>
            <Row>
                Third row in second column
            </Row>
            <Row>
                Fourth row in second column
            </Row>
          </Col>
        </Row>
      </Container>

Комментарии:

1. @user1511956 надеюсь, я правильно понял вашу проблему и решил ее. Пожалуйста, примите решение, если оно разрешено. Пожалуйста, добавьте скриншот точной проблемы, если вы все еще сталкиваетесь с проблемой,

2. Я думал о двух столбцах с одной строкой в первом столбце (которая занимает много высоты) и четырех строках во втором столбце, а не шести столбцах. Имеет ли это смысл?

Ответ №2:

Вам необходимо использовать следующий класс начальной загрузки для содержащего столбца.

  d-flex align-items-stretch

Это будет столбец, внутри которого находятся 4 элемента

Ответ №3:

В итоге я установил min-height: «высота изображения» / «количество строк», чтобы получить желаемый эффект во втором столбце. Однако тогда он не масштабируется динамически с помощью переменной «изображение высоты». Я постараюсь проверить ответы других и посмотреть, смогу ли я заставить это работать в то же время.