如何旋转文本并将其放入Bootstrap列中？

我在寻找整天计算器办法转动我的文字，但是当我添加的自举列的东西，它只是打破...如何旋转文本并将其放入Bootstrap列中？

我正在写有2个colums的标题和10列的页面内容。

标题文本应该是一个垂直文本，沿着盒子高度，内容应该是任何文本或img。

这里是HTML/CSS，我已经写了：

<div class="container"> 
<div class="row" style="height: 350px;"> 
    <div class="col-xs-2"> 
     <div class="vertical-text"> 
      <h3>some text</h3> 
     </div> 
    </div> 
    <div class="col-xs-10"> 
     <div class="some-img"></div> 
     <div class="some-text"> 
      <p>blablablabla</p> 
      <p>blablablabla</p> 
      <p>blablablabla</p> 
     </div> 
    </div> 
</div>

.vertical-text { 
    transform: rotate(90deg); 
    background: green; 
} 

.row { padding: 15px; }

的jsfiddle的问题：http://jsfiddle.net/cxhmssam/1/

来源

2015-11-03 gbrennon

我不明白你的问题是什么。你的小提琴显示旋转的文字。如果你正在寻找IE9，那么它需要一个供应商前缀，以及Safari 8：http://caniuse.com/#search=transform – Shane

你的jsfiddle显示 “一些文本” 为垂直我。

正如@Shane所建议的那样，您可能想尝试-ms-transform。

报价w3schools：

div { 
    -ms-transform: rotate(7deg); /* IE 9 */ 
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 
    transform: rotate(7deg); 
}

来源

2015-11-03 21:10:26

如何旋转文本并将其放入Bootstrap列中？

回答

相关问题