html - 一个带有垂直文本的 Bootstrap 列

Question

我想将“VERTICAL_TEXT”(第三 Bootstrap 列)旋转 90º。我尝试了以下代码:

<div class="row">
    <div class="col-xs-2" style="background-color: yellow;">
        <span>FOO1</span><br/>
        <span>FOO2</span>
    </div>
    <div class="col-xs-8" style="background-color: red;">
        <div>
            <span>BAR1</span><br/>
            <span>BAR2</span><br/>
            <span>BAR3</span><br/>
            <span>BAR4</span><br/>
        </div>
    </div>
    <div class="col-xs-2" style="background-color: blue;">
            <span class="rotate_text">VERTICAL TEXT</span>
    </div>
</div>



.text_rotate {
    /* Safari */
    -webkit-transform: rotate(90deg);

    /* Firefox */
    -moz-transform: rotate(90deg);

    /* IE */
    -ms-transform: rotate(90deg);

    /* Opera */
    -o-transform: rotate(90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

下面的 fiddle 说明了这个问题:

https://jsfiddle.net/fbtg1zjx/

---

编辑:

我包含了行内 block 样式，文本现在按照答案中的建议进行了旋转，但是文本并未从文档的上半部分开始。 (全文包括N/00001前4个字符，绿色为span item，蓝色为parent div。

Answer 1

您应该将 text_rotate 放在父 div 上。