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

问题描述

我有很多不同的列大小，因此当我在其中放置跟随代码时，每个列中的旋转文本都不同。

I'm having a lot of different col sizes, so when I place my follow code in there, the rotated text is different in every col.

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

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

I want to look it like this in every col:

推荐答案

您的代码几乎可以正常工作。当然，您没有包含任何HTML或Bootstrap，因此很难确定您到底在哪里遇到麻烦。就是说，这里有一些CSS，其布局与您的图像相似。

Your code is pretty much functional. Of course, you have not included any HTML, or Bootstrap for that matter, so it's a little hard to decipher where exactly you are having trouble. That said, here's a little CSS with a layout similar to that of your image.

我基本上在文本左侧添加了填充，并设置了最小高度，因此左侧的文本不会重叠。显然，可能都需要调整两者以适合您的需要。

I've essentially added a padding to the left of the text and a minimum height so the text on the left won't overlap. Obviously, both may have to be adjusted to fit you needs.

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

，带有演示。

这篇关于在Bootstrap中以不同的col大小旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！