如何旋转文本并将其放入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);
}