如何在用Bootstrap4和Flex制作的笛卡儿平面上显示网格项？

Question

我需要用Bootstrap 4和Flex实现一个笛卡尔平面。所需的输出类似于以下图像：

​

​

平面由10x10矩阵组成。此外，我需要一行包含x标签和列显示y标签。

这是我的密码：

<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
    <div class="d-flex flex-row">
        <div class="p-2 align-items-stretch">1</div>
    </div>
    <div class="d-flex flex-column">
        <div class="p-2">1</div>
        <div class="p-2">2</div>
        <div class="p-2">3</div>
        <div class="p-2">4</div>
        <div class="p-2">5</div>
        <div class="p-2">6</div>
        <div class="p-2">7</div>
        <div class="p-2">8</div>
        <div class="p-2">9</div>
        <div class="p-2">10</div>
        <div class="p-2 align-items-stretch">11</div>
    </div>
    <div class="d-flex flex-column">
        <div class="p-2">1</div>
        <div class="p-2">2</div>
        <div class="p-2">3</div>
        <div class="p-2">4</div>
        <div class="p-2">5</div>
        <div class="p-2">6</div>
        <div class="p-2">7</div>
        <div class="p-2">8</div>
        <div class="p-2">9</div>
        <div class="p-2">10</div>
    </div>

    <!-- the same for the other 8 rows -->
</div>

以及相关的css：

.p-2 {
    border: 1px solid lightgray;
}

.p-2:before {
    content:'';
    float:left;
    padding-top:100%;
}

实际结果是：

​

我有两个问题：

1. 第11行应延伸至最后一列；
2. 网格项应根据容器的可用空间调整其大小。

我怎样才能达到这些目标？谢谢

Answer 1

你可以像这样使用自举栅格 .

演示：https://www.codeply.com/go/sQA6tvHiZh

<div class="container text-center">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="row">

                <div class="col-1">y</div>
                <div class="col-11">
                    <div class="row">
                        <div class="col">1
                        </div>
                        <div class="col">2
                        </div>
                        <div class="col">3
                        </div>
                        <div class="col">4
                        </div>
                        <div class="col">5
                        </div>
                        <div class="col">6
                        </div>
                        <div class="col">7
                        </div>
                        <div class="col">8
                        </div>
                        <div class="col">9
                        </div>
                        <div class="col">10
                        </div>
                    </div>
                    <!--/row-->
                    9 more row ...

                    <div class="row">
                        <div class="col">x
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--container-->
</div>