Twitter Bootstrap崩溃面板侧身

Question

所以对于那些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;
}

Answer 1

这不是一个很好的方法来解决这个问题，除非这是一种反复播放到不同状态的响应式网站。即使这样，它也不是一个好主意。如果所有你想要的东西都重新组合在一起就可以让它发挥作用，但是因为你已经翻转了所有内容，所以你的左右边缘都会变成顶部边缘，而你的填充也是如此，这使得它成为维持和改进的绝对噩梦。这就是我如何弄清楚边缘的问题：

enter code here

http://jsfiddle.net/feonh638/

执行此操作的最佳方法是取出单个元素并垂直重建它们。如果你去bootstrap文档，你应该找到每个单独的元素以及如何使用它们。我真的不能告诉你从哪里开始，因为你应该从头开始。它将为您节省大量的时间和麻烦。