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

解决问题：http://jsfiddle.net/cxhmssam/1/

Answer 1

你的jsfiddle显示＆＃34;一些文字＆＃34;垂直对我来说。

根据@Shane的建议，您可能想尝试-ms-transform。

引用w3schools：

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

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

1 个答案: