我想知道如何获得下面的布局。
在中型和大型设备上,我希望有 2 行和 2 列的布局(2 x 2 矩阵)。
在小型(和超小型)设备上或调整为小型设备时,我想要一个 4 行和 1 列的矩阵。
我将通过 ascii 对其进行说明。
1) 2 x 2 矩阵(中型和大型):
(b1) (b2)
____________
r1c1 r1c2
r2c1 r2c2
2) 4 x 1 矩阵(小和超小):
(b1)
r1c1
r2c1
(b2)
r1c2
r2c2
这里重要的是,在调整为小的时候按 block 合并列和行。在这种情况下,一个 block 由每列两行组成。这由 (b1)、(b2) 表示。
这种逻辑应该可以扩展到多行和多列。
我可能找错了树。
一般来说,我希望在图片下方网格对齐文本。在 block 中,第一行始终是图像,第二行始终是对齐的文本。
那么如何克服呢?
如果我正确理解您的问题,最简单的解决方案是为每一列添加订单类。在不同尺寸、PC 和移动设备上查看下面的代码片段,看看布局和顺序的差异。
biên tập:我按照您的要求在小屏幕上添加了边距。
/*DEMO PURPOSE*/.col-md-6{border:1px red solid;padding:2rem}
Row 1 Col 1
Row 1 Col 2
Row 2 Col 1
Row 2 Col 2
Tôi là một lập trình viên xuất sắc, rất giỏi!