在平板电脑或笔记本电脑上,帖子和侧栏将与帖子一起显示在左侧或右侧,而侧栏将相反。例如:

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>


从理论上讲,这在移动设备上应该有所帮助,但仍然没有作用。

最佳答案

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

如需更多帮助,请分享您的网页链接吗?这样我们就可以确定到底是什么问题。

10-05 20:55
查看更多