因此,对于那些对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/

最好的方法是取出各个元素并垂直重建它们。如果您访问引导文档,则应该找到每个单独的元素以及如何使用它们。我真的不能告诉您从哪里开始,因为您应该真正从头开始。它将为您节省很多时间和将来的麻烦。

09-10 13:03
查看更多