一个带有垂直文本的 Bootstrap 列答案

【问题标题】：One Bootstrap column with vertical text一个带有垂直文本的 Bootstrap 列
【发布时间】：2017-07-02 09:14:43
【问题描述】：

我想将“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/

已编辑：

我包含了 inline-block 样式，并且文本现在按照答案中的建议进行了旋转，但是文本没有从文档的上部开始。（全文包括N/00001之前的4个字符。绿色是span项，蓝色是父div。

【问题讨论】：

Containing element not expanding vertically when content has rotated text的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

你应该把text_rotate放在父div上。

【讨论】：

【解决方案2】：

许多 CSS 规则，包括 Width、Height 和此类转换不适用于具有 display:inline 的元素，span 默认情况下是一个内联元素，只需给它一个 display:block 或 inline-block 它应该适合你.. 也尝试添加一个通用的变换规则，transform:rotate(90deg);

要解决文本在容器之外的第二个问题，您可以使用以下 CSS 修复：

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

或使用变换原点

.text_rotate {  
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    transform: rotate(90deg);
    display:block; 
    transform-origin: 0% 50%;
}

请测试一下，看看哪一种更适合您的情况。希望对你有帮助

【讨论】：