Bootstrap 和垂直文本 - 无法正常工作
Bootstrap and Vertical Text - Cannot Get it to Work
我对与 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}
根据另一个问题找到了答案...我稍微修改了一下,现在是 - http://jsfiddle.net/CCMyf/274/希望它对其他人有帮助。
Code on fiddle page above.
我对与 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}
根据另一个问题找到了答案...我稍微修改了一下,现在是 - http://jsfiddle.net/CCMyf/274/希望它对其他人有帮助。
Code on fiddle page above.