React Bootstrap V3, сделать строку с высотой максимального компонента высоты в двух столбцах

Question

Я пытаюсь сделать представление в виде двух столбцов для некоторых компонентов как таковых

<Grid fluid={true}>
  <Row>
    <Col sm={6}>
      <Component>
    </Col>
    <Col sm={6}>
      <Component>
    </Col>
    <Col sm={6}>
      <Component>
    </Col>
    <Col sm={6}>
      <Component>
    </Col>
    ....
  </Row>
</Grid>

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

См. проблему здесь

Мне нужен левый компонент для строки 2 до go под левым компонентом для строки 1, а затем следующий правый компонент для строки 2, чтобы он был непосредственно рядом с левым компонентом и не занимал никаких лишних пробелов, оставленных правым компонентом для строки 1.

Любые решения будут оценены! !

Answer 1

Я воспроизвел его, и такой проблемы нет, и он работает так, как вы ожидали (возможно, вы добавили несколько таблиц стилей, которые вызвали проблему, или использование <Component> вместо <Component/> вызывает проблему):

введите описание изображения здесь

(Обратите внимание, что я использовал последнюю версию react-bootstrap, а Grid переименован в Container в этой версии.)

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
const Component = props => (
  <div
    style={{
      height: props.height ? props.height + "px" : "auto",
      background: "#35f",
      margin: "10px",
      color: "white"
    }}
  >
    component
  </div>
);
export default () => (
  <Container fluid>
    <Row>
      <Col sm={6}>
        <Component height={200} />
      </Col>
      <Col sm={6}>
        <Component height={100} />
      </Col>
      <Col sm={6}>
        <Component height={50} />
      </Col>
      <Col sm={6}>
        <Component />
      </Col>
    </Row>
  </Container>
);