twitter-bootstrap - 在 Bootstrap 中呈现旋转的文本

Question

使用 Bootstrap 3，我试图在 div 的一行和中心生成旋转文本。为什么 #map 中的文本显示为 3 行？

但我想要这样的东西:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
#map{
  display: inline-block;
    transform: rotate(-90deg);

    color: #ed217c;
}

<div class="container">
<div class="row">
  <div class="col-xs-1"><span id="map">Here is Starter Plan</span></div>
  <div class="col-xs-11" style="background:red;min-height:400px;">Rest Of Content</div>
</div>
</div>  

Answer 1

只需使用 translate 使其正确定位并使用 white-space: nowrap; 使其没有换行符。

#map {
  display: inline-block;
  transform: rotate(-90deg) translate(-100px, -30px);
  color: #ed217c;
  white-space: nowrap;
}