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修复它。

如需更多帮助，请与您分享您网页的链接？这样我们就可以确定究竟是什么问题了。

响应中心边栏在移动设备上

1 个答案: