无法在Bootstrap 4网格中对齐旋转后的文本

Question

我有一个使用Bootstrap 4网格的网格，我希望如下所示：

我几乎完成了100％，我遇到的问题是垂直旋转的文本的对齐方式与颜色网格重叠。我正在使用Bootstrap扩展printf来旋转文本。我似乎无法弄清楚如何对齐标签。

这是一个codeply小提琴： https://www.codeply.com/go/Xd4pcADxml

Answer 1

我为标签添加了自定义CSS，而不是“ rotate-sm-l-90”类。

.vertical-label {
transform: rotate(-180deg);
writing-mode: vertical-lr;
padding: 16px;

}

Here is the result