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

这不是解决此问题的好方法，除非这是某种来回切换到不同状态的响应式站点。即便如此，这也不是一个好主意。如果你想要做的只是把东西重新组合在一起，你可以让它工作，但是因为你已经翻转了所有东西 90 你所有的左边距都变成了顶部底部边距，并且与你的填充相同，这使得它成为维护和改进的绝对噩梦。这就是我如何弄乱边距的方法：

enter code here

http://jsfiddle.net/feonh638/

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