因此,对于那些对CSS更好的人,希望他们可以帮助我,或者引导我朝着不同的方向发展。我试图通过折叠手风琴向侧面翻转自举面板。我已经走了这么远。但是我在面板主体内容方面遇到问题。
真正的问题是将内容翻转回90
我不确定有更好的方法
从下面的图片中您可以看到问题所在
我的jsfiddle http://jsfiddle.net/cr1t/aegrguu1/1/
.panel-group
{
width: 380px;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading
{
width: 100%;
}
.panel-title
{
height: 18px;
}
.panel-title a
{
float: right;
text-decoration: none;
padding: 10px 310px;
margin: -10px -310px;
}
.panel-body
{
height: 310px;
}
.panel-group span
{
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(90deg);
transform-origin: right top;
}
.panel-group .panel span
{
margin-left: 350px;
margin-top: 390px;
position: absolute;
width: 100%;
}
.bordered {
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
padding: 5px 5px 5px 5px;
margin-top: 5px;
}
最佳答案
除非这是一种可响应的站点,它会来回切换到不同的状态,否则这不是解决此问题的好方法。即使那样,它也不是一个好主意。如果您想做的就是将所有内容放回原处,就可以使其正常工作。但是,由于已将所有内容都翻转了90,因此您的左,右所有页边空白都变成了顶部底边空白,并且与填充相同,这无疑是维持和改善它的绝对噩梦。这就是我如何使它混乱的工作:
enter code here
http://jsfiddle.net/feonh638/
最好的方法是取出各个元素并垂直重建它们。如果您访问引导文档,则应该找到每个单独的元素以及如何使用它们。我真的不能告诉您从哪里开始,因为您应该真正从头开始。它将为您节省很多时间和将来的麻烦。