如何在Bootstrap网格的左侧列中添加Box4？

要实现你想要的布局，只需在左侧的col-6容器内，在Box2所在的row下方添加一个结构一致的row来放置Box4，保持和Box2相同的居中对齐样式即可。

修改后的完整代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">
        <title>Example</title>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Box 1</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div id="left-panel-top"  class="row justify-content-center">
                    <div class="align-self-center">
                    Box 2
                    </div>
                </div>
                <!-- 添加Box4的结构 -->
                <div id="left-panel-bottom"  class="row justify-content-center">
                    <div class="align-self-center">
                    Box 4
                    </div>
                </div>
            </div>
            <div id="right-panel" class="col-6">
                <div class="row justify-content-center">
                    <div class="align-self-center">
                       Box 3
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者equanimity