jquery - 当绝对元素可见但保持居中时，向页面内容添加边距

Question

我有一个内容居中的页面 width: 980px; margin :0 自动；。我正在添加一个侧边栏(显示/隐藏)，它是绝对定位的，我不希望它与内容重叠。我一直在尝试各种方法来解决这个问题，通过向内容添加填充和边距等，但没有达到预期的结果，因为它目前将内容拉到左边，而它仍应保持居中。

JSFiddle http://jsfiddle.net/x06c3ysf/

$('#custom-sidebar').on('click', function () {
    $(this).toggleClass('hide');
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        $('#inner').addClass('adjust');
    }
});

// run on page load
if ($('#custom-sidebar').hasClass('hide')) {
    $('#inner').removeClass('adjust');
} else {
    $('#inner').addClass('adjust');
}

期望的结果:内容始终在页面调整大小时居中，当页面太窄以至于被侧边栏挡住时，页面内容应位于侧边栏旁边。

Answer 1

你们很亲近。您需要添加媒体查询以防止“捕捉 Action ”

演示 http://jsfiddle.net/x06c3ysf/7/

@media (max-width: 718px) {
    .adjust #inner {
        margin: 0 0 0 122px;
    }
}