CSS 以不同的列大小旋转 Bootstrap 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30552754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate Text in Bootstrap in different col sizes
提问by Jonathan
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.
我有很多不同的 col 大小，所以当我将我的跟随代码放在那里时，每个 col 的旋转文本都不同。
CSS:
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:
我想在每个 col 中看起来像这样：
回答by Jonathan
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.
您的代码非常实用。当然，您还没有包含任何 HTML 或 Bootstrap，因此很难解读到底是哪里出了问题。也就是说，这里有一个小 CSS，其布局类似于您的图像的布局。
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;
}
Here is a Fiddlewith a demonstration.
回答by William A.
The easiest way to solve with Bootstrap Extension.
使用 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>
More details: http://bootstrap-extension.com/#content-rotate
