Html Can'；无法在引导4网格中对齐旋转文本

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

我已经完成了几乎100%，问题是垂直旋转文本的对齐与颜色网格重叠。我使用引导扩展

内容旋转

来旋转文本。我只是不知道如何把标签对齐

这是一把codeply小提琴：

i类增加了标签自定义css，取代了“rotate-sm-l-90”

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

}

---

行

仅检测

列的常规行为

，扩展名仅旋转文本。即使在这种情况下，也没有一种简单的方法来处理响应文本。因此，根据文档，我可以立即给出一个简单的建议，即将

rotate-sm-l-90

更改为

rotate-sm-r-90

。但是，您仍然需要处理外部框的大小，或者您可以手动设置行的高度并减小文本的大小。