对Bootstrap中的旋转文本有问题

Question

使用Bootstrap 3，我在div的一行和中心生成旋转文本时遇到了一些问题。您能否看一下这个演示，让我知道为什么#map旁边的文字出现在3行？像：

但我想要像

这样的东西

＆＃13;

＆＃13;

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

    color: #ed217c;
}

＆＃13;

<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>  

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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