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

Question

我有很多不同的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;
}

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

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

这是一个小提琴演示.

Answer 2

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

<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