具有网格布局的 Bootstrap 在 3 列中获得不必要的间距

Question

我在我的项目中使用了一个

react-bootstrap

包，

我有一个像这样的 3

<Col>

组件

<Container>
    <Row>
        <Col xs={12} lg={7}> {/* A */}
            ....
        </Col>
        <Col xs={12} lg={5}> {/* B */}
            ...
        </Col>
        <Col xs={12} lg={7}> {/* C */}
            ...
        </Col>
    </Row>
</Container>

这使得

LG

屏幕中的输出与此类似

_______ _______
|     | |     |
|  A  | |  B  |
|_____| |_____|
|     |
|  C  |
|_____|

那个输出没问题，但这里的问题是当

B

组件变得更大的高度时，它会在

Col A

和

Col C

之间给出一个不必要的间距，就像这样

_______ _______
|     | |     |
|  A  | |     |
|_____| |  B  |
        |     |
        |_____|
_______  
|     |
|  C  |
|_____| 

当

C

在

B

网格中变高时，我不想将我的

lg

降低，我该怎么办？

Answer 1

我认为，您正在寻找 Masonry CSS 网格。 我不能很好地解释，但这里有一些链接

对于 Firefox：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout#:~:text=Masonry%20layout%20is%20a%20layout,to%20completely%20fill% 20%20 差距.

对于其他浏览器：https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Answer 2

您正在寻找砌体布局

引导砌体

它的工作原理是覆盖不均匀的同行列留下的垂直空间。

Answer 3

刚刚写了一个伪代码。希望对你有帮助

<Container>
    <Row>
        <Col xs={6} lg={6}> {/* COLUMN 1 */}
              <Col xs={12} lg={12}> {/* A */}
              ...
              </Col>
              <Col xs={12} lg={12}> {/* C */}
              ...
              </Col>
        </Col>

        <Col xs={6} lg={6}> {/* COLUMN 2 */}
            <Col xs={12} lg={12}> {/* B */}
             ...
            </Col>
        </Col>      
    </Row>
</Container>