Question

我以前做过这个，但没有使用bootstrap，上次我也记不起解决方案..

我想要什么：使用bootstrap的响应式设计，其中每列使用百分比给出宽度。

客户想要什么：旧网页滑出的网页与新幻灯片之间的良好过渡。

解决方案：$(".page").css("left", something)并使用CSS3添加一些过渡属性。

此类解决方案需要什么：只有具有绝对位置的元素才能使用top和left属性。

问题：由于列位于绝对定位的div中，因此列不再响应！：（

<div id="pagewrapper">
    <div class="container page">
        <div class="row">
            <div class="col-xs-6">
                <p>Bla bla bla bla bla bla</p>
            </div>
            <div class="col-xs-6">
                <p>Bla bla bla bla bla bla</p>
            </div>
        </div>
    </div>
</div>
<style>
#pagewrapper {
    /* 
    margin and padding because I have a fixed header and footer 
    */
    margin: 0 auto; 
    padding: 60px 25px;
    position: relative;
}

.page {
    position: absolute;
    /* mixins for LESS I dont have here now
    .transition-duration(2s);
    .transition-property(left);
    */
}
</style>

这是JSFIDDLE。 position: absolute暂时已注释掉了，请注意它，你会看到差异。

Answer 1

top和left属性也可以由相对定位的元素使用。

.page{position: relative; left: 100%;}

位置相对不应改变您的响应式布局，并允许您使用css动画。

在绝对定位的div内浮动％-width

1 个答案: