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中看起来像这样：

enter image description here

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中以不同的col大小旋转文本

2 个答案: