在平板电脑或笔记本电脑上,帖子和侧栏将与帖子一起显示在左侧或右侧,而侧栏将相反。例如:
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修复它。
如需更多帮助,请分享您的网页链接吗?这样我们就可以确定到底是什么问题。