css - 在 Bootstrap 中以不同的 col 大小旋转文本

Question

我有很多不同的列大小，所以当我将后续代码放在那里时，每个列的旋转文本都不同。

CSS:

.verticaltext {
    position: relative;
}

.verticaltext_content {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    left: -60px;
    top: 35px;
    position: absolute;
    color: #FFF;
    text-transform: uppercase;
}

我想在每个列中看起来像这样:

Answer 1

您的代码非常实用。当然，您没有包含任何 HTML 或 Bootstrap，因此很难破译您遇到问题的确切位置。也就是说，这里有一些 CSS，其布局类似于您的图片。

我基本上在文本的左侧添加了一个填充和一个最小高度，这样左侧的文本就不会重叠。显然，两者都可能需要进行调整以满足您的需求。

 body {
     background: #000;
     color: #fff;
     font-family: Arial, sans-serif;
 }

 .verticaltext {
     position: relative;
     padding-left: 50px;
     margin: 1em 0;
     min-height: 120px;
 }

 .verticaltext_content {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     left: -40px;
     top: 35px;
     position: absolute;
     color: #FFF;
     text-transform: uppercase;
     font-size: 26px;
     font-weight: bold;
 }

Here is a Fiddle有演示。