如何调整dojo BorderContainer布局来处理旋转的按钮？

Question

我正在尝试使用旋转按钮在应用程序的左侧实现导航工具栏。当我使用css transform：rotate旋转按钮时，边界容器仍然执行其所有的布局计算，就好像按钮没有旋转一样，所以它们最终重叠并且垂直错误。在深入理解dijit/layout/utils模块以解决此问题之前，我想知道是否有人已经有了我只是没有看到的解决方案。

谢谢！

这里小提琴http://jsfiddle.net/eric_isakson/2bkKk/6/

的JavaScript：

require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) { 
    var bc = new BorderContainer(); 
    bc.placeAt(win.body(), "last"); 
    var tb = new Toolbar({region: "leading"}); 
    bc.addChild(tb); 
    var b1 = new Button({label: "button1"}); 
    tb.addChild(b1); 
    var b2 = new Button({label: "button2"}); 
    tb.addChild(b2); 
    bc.startup(); 
    tb.startup(); 
    b1.startup(); 
    b2.startup(); 
}); 

CSS

html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
overflow:hidden; 
} 

.dijitBorderContainer { 
width: 100%; 
height: 100%; 
} 

.dijitButton { 
transform:rotate(-90deg); 
-ms-transform:rotate(-90deg); /* IE 9 */ 
-webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
display: block; 
} 

这里是理想的外观：

Answer 1

如果我理解你是对的，你想要你的按钮水平？ 然后你只需要删除旋转的行。

.dijitButton { 
display: block; 
} 

问候，杨千嬅