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

【问题标题】：Rotate Text in Bootstrap in different col sizes以不同的 col 大小在 Bootstrap 中旋转文本
【发布时间】：2015-08-13 16:30:53
【问题描述】：

我有很多不同的 col 大小，所以当我将跟随代码放在那里时，每个 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;
}

我想在每一列都这样：

【问题讨论】：

也许使用 transform-origin 会有所帮助？
请创建一个 jsfiddle 或上传更多代码

标签： css twitter-bootstrap transform

【解决方案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 进行演示。

【讨论】：

【解决方案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>

【讨论】：