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%;
}

实际结果是：

我有两个问题：

行号11应该延伸到最后一列;
网格项目应根据可用空间调整其大小容器。

我如何实现这些目标？谢谢

Answer 1

您可以像这样使用Bootstrap grid ......

演示：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>

如何在使用Bootstrap4和Flex制作的笛卡尔平面中拉伸网格项？

1 个答案: