html - Bootstrap 和垂直文本 - 无法正常工作

Question

我对垂直文本与 bootstrap 的混合没有任何运气。一旦我开始工作，我也试图垂直对齐 div 中的文本。解释它的最好方法就是真实地展示它。这是 fiddle - https://jsfiddle.net/gx1Lb2jf/4/如您所见，垂直文本没有向下插入 div。

下面是 fiddle 的代码:

    <div class="col-xs-12">

  <div class="col-xs-12 border-container">
      <div class="col-xs-1">
          <div class="vertical-text">dafadsf sda fd sf</div>
      </div>
    <div class="col-xs-11">
     dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf   dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf   dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf  dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf
    </div>
  </div>

</div>

.vertical-text {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  text-transform: uppercase;
}

.border-container {border:2px solid #000}
.border{border:2px solid red}
.go-right{float:right}
.go-left{float:left}
.nopad{padding:0}

Answer 1

根据另一个问题找到答案...我稍微修改了一下，这里是 - http://jsfiddle.net/CCMyf/274/希望它能帮助别人。

Code on fiddle page above.