1つのブートストラップカラムに垂直のテキスト

Question

"VERTICAL_TEXT"（3番目のブートストラップカラム）を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/

---

：

私はインラインブロックスタイルとテキストが含まれて回答で示唆されているように回転されますが、テキストは文書の上部で開始しません。 （全文はN/00001前の4つの文字が含まれています。グリーンでは、それは親のdiv青色で、スパンアイテムです。

Answer 1

幅、高さなどの変換を含む多くのCSSルールを上に動作しません。 display：inline、spanはデフォルトでインラインelemntで、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%; 
} 

を変換使用状況に優れている一つの試験および参照してください。 希望します。

Answer 2

親のdivにtext_rotateを入れてください。