Question

我对使用bootstrap混合的垂直文本没有任何好运。一旦我开始工作，我也试图垂直对齐div中的文本。解释它的最好方法就是真正展示它。这是小提琴 - https://jsfiddle.net/gx1Lb2jf/4/正如你所看到的那样，垂直文字没有向下推进到div中。

以下是小提琴的代码：

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

Bootstrap和垂直文本 - 无法使其工作

1 个答案: