html - 如何旋转文本并将其放入 Bootstrap 列？

Question

我整天都在 stackoverflow 上搜索旋转文本的方法，但是当我添加 Bootstrap 列内容时，它就中断了...

我正在编写一个包含 2 列标题和 10 列内容的页面。

标题文本应该是沿框高度的垂直文本，内容应该是文本或 img 之类的任何内容。

这是我写的 html/css:

<div class="container">
<div class="row" style="height: 350px;">
    <div class="col-xs-2">
        <div class="vertical-text">
            <h3>some text</h3>
        </div>
    </div>
    <div class="col-xs-10">
        <div class="some-img"></div>
        <div class="some-text">
            <p>blablablabla</p>
            <p>blablablabla</p>
            <p>blablablabla</p>
        </div>
    </div>
</div>

.vertical-text {
    transform: rotate(90deg);
    background: green;
}

.row { padding: 15px; }

Jsfiddle 问题:http://jsfiddle.net/cxhmssam/1/

Answer 1

你的 jsfiddle 为我垂直显示“一些文本”。

正如@Shane 所建议的，您可能想尝试 -ms-transform。

引用 w3schools :

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}