css - 响应式地在移动设备上居中侧边栏

Question

在平板电脑或笔记本电脑上，帖子和侧边栏将出现在左侧或右侧，而侧边栏则相反。例如:

Sidebar | Post

……或者……

Post | Sidebar

问题出在移动设备上——示例一中的帖子或示例二中的边栏将显示为左对齐，而我希望它们居中放置。我不能给它们每个都设置 100% 的宽度 - 即使在移动设备上，这也是我想要的。

我确实尝试了一些让 div 居中的技术；例如，我认为我可以像这样在帖子或侧边栏中使用响应式 div 方法:

<div class="row">
    <div class="col-xs-12 col-md-8"><!-- POST --></div>
    <div class="col-xs-6 col-md-4">
        <div class="col-md-2"></div>
        <div class="col-md-8"><!-- SIDEBAR --></div>
        <div class="col-md-2"></div>
    </div>
</div>

... 反之亦然，其中帖子居中，侧边栏在顶部。在这两种情况下，在移动设备上，居中的 div (col-md-8) 仍然左对齐。

只是为了形象化目标，在笔记本电脑或平板电脑上，它看起来像:

Sidebar | Post

或

Post | Sidebar

在手机上，它看起来像:

Sidebar-Centered
Post-Centered

更新:

使用移动版 xs 测试:

<div class="row">
    <div class="col-xs-12 col-md-8"><!-- POST --></div>
    <div class="col-xs-6 col-md-4">
        <div class="col-xs-3 col-md-2"></div>
        <div class="col-xs-12 col-md-8"><!-- SIDEBAR --></div>
        <div class="col-xs-3 col-md-2"></div>
    </div>
</div>

理论上，这应该在移动设备上有所帮助，但仍然不行。

Answer 1

您的 CSS 不会有其他问题。 您可以使用 css 修复它。

如需更多帮助，能否分享一下您的网页链接？这样我们就可以配置出究竟是什么问题。