所以对于那些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;
}
答案 0 :(得分:0)
这不是一个很好的方法来解决这个问题,除非这是一种反复播放到不同状态的响应式网站。即使这样,它也不是一个好主意。如果所有你想要的东西都重新组合在一起就可以让它发挥作用,但是因为你已经翻转了所有内容,所以你的左右边缘都会变成顶部边缘,而你的填充也是如此,这使得它成为维持和改进的绝对噩梦。这就是我如何弄清楚边缘的问题:
enter code here
执行此操作的最佳方法是取出单个元素并垂直重建它们。如果你去bootstrap文档,你应该找到每个单独的元素以及如何使用它们。我真的不能告诉你从哪里开始,因为你应该从头开始。它将为您节省大量的时间和麻烦。