使用 Bootstrap 网格向现有列添加另一个框答案

【问题标题】：Adding another box to an existing column using Bootstrap grid使用 Bootstrap 网格向现有列添加另一个框
【发布时间】：2022-09-27 20:34:00
【问题描述】：

我目前有一个Bootstrap 网格，如下所示：

代码是：

<!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\"  class=\"row justify-content-center\">
                    <div class=\"align-self-center\">
                    Box 2
                    </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>

我想在网格中添加一个框 4，如下所示：

我将如何修改我的代码来做到这一点？

谢谢！

标签： html bootstrap-4

【解决方案1】：

请检查以下一项，我们使用了嵌套 div：

<!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 border border-dark text-center">
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Box 1</h1>
            </div>
        </div>
        <div class="row border border-dark">
            <div class="col-6">
                <div id="left-panel col-12 border border-dark"  class="row justify-content-center">
                    <div class="align-self-center border border-dark">
                    Box 2
                    </div>
                </div>
                <div id="left-panel col-12 border border-dark"  class="row justify-content-center">
                    <div class="align-self-center border border-dark">
                    Box 4
                    </div>
                </div>
            </div>
            <div id="right-panel" class="col-6 border border-dark">
                <div class="row justify-content-center">
                    <div class="align-self-center">
                       Box 3
                    </div>
                </div>
            </div>
            

        </div>
    </div>
    </body>
</html>

【讨论】：

此输出未解决所提出的问题。请注意，我截图中的方框 4 是直接下框 3（而您的框 4 是正确的框 3)？
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。