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

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有演示。

Answer 2

使用 Bootstrap 扩展解决问题的最简单方法。

<div class="container o-hidden">
    <div class="row">
        <div class="col-12 col-sm-6 col-sm-push-4 rotate-sm-l-90">
            <p class="display-6">Some text</p>
            <hr class="bg-dark">
        </div>
        <div class="col-12 col-sm-6">
            <img class="w-100 mt-5" src="sample1.jpg" alt="sample1">
        </div>
    </div>
</div>

更多详情：http://bootstrap-extension.com/#content-rotate

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

Rotate Text in Bootstrap in different col sizes

css

transform

twitter-bootstrap