在絕對定位的div內以％-width浮動

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動畫。