一个带有垂直文本的Bootstrap列

Question

我想将“VERTICAL_TEXT”（第三个自举列）旋转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);
}

以下小提琴说明问题：

https://jsfiddle.net/fbtg1zjx/

编辑：

我包含了内联块样式，文本现在按照答案中的建议旋转，但文本不会从文档的上半部分开始。 （整个文本包括N / 00001之前的4个字符。绿色是span项目，蓝色是父div。

Answer 1

许多CSS规则（包括宽度，高度和此类变换）不适用于带有display的元素：inline，span默认为内联元素，只需给它一个display：block或inline-block，它应该适合你.. 还尝试添加一般转换规则，transform：rotate（90deg）;

修复第二个问题，即文本位于容器之外，您可以使用CSS修复程序：

<DataGrid ScrollViewer.VerticalScrollBarVisibility="Auto" />

或使用变换原点

.text_rotate { 
    /* add  translate(50%) to transforms */
    -webkit-transform: rotate(90deg) translate(50%); 
    -moz-transform: rotate(90deg) translate(50%); 
    -ms-transform: rotate(90deg) translate(50%); 
    -o-transform: rotate(90deg) translate(50%); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    transform: rotate(90deg) translate(50%);
    display:block; 
}

请测试哪一个更适合您的情况。 希望它有所帮助

Answer 2

您应该将text_rotate放在父div上。