帶有垂直文字的一個引導柱

我想將「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); 
}

下小提琴ilustrates問題：

https://jsfiddle.net/fbtg1zjx/

編輯：

我包括inline-block的風格和文本現在按照答案中的建議旋轉，但文本不在文檔的上半部分開始。（整個文本包括4個字符之前N/00001。在綠色IT是跨項目，在藍父DIV。

來源

2017-07-01 M.E.

[包含元素在內容旋轉文本時不能垂直擴展]的可能副本（https://stackoverflow.com/questions/15712981/containing-element-not-expanding-vertically-when-content-has-rotated-text ） – buxbeatz

許多CSS規則，包括寬度，高度和這樣的變換不起作用上顯示內容的元素：內聯，跨度默認爲內聯元素，只需給它一個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%; 
}

請測試，看看哪一個是您的情況更好。希望它有幫助

來源

2017-07-01 19:59:59 Fered

謝謝，請參閱我的更新 –

以上我將更新答案 – Fered

你應該把text_rotate放在父div上。

來源

2017-07-01 20:01:23 Pim

帶有垂直文字的一個引導柱

回答

相關問題