Question

我有两个主要的盒子：一个带有一堆面板的8-col宽盒子，另一个带有第二个4-col（offset-1）作为侧边栏。

我想在小屏幕上将侧边栏推到盒子顶部的侧边栏上。我尝试过应用col-12 col-push-12（面板框）和col-12 col-pull-12（侧边框），但没有任何运气。我还想确保侧边栏在网格上方“向上”（即好像它是col-offset-4 col-4），当它被推到顶部时。

我还注意到GitHub上关于某些行为的Bootstrap repo的一些动作（开放问题），但我可能只是在混淆事情。

<div class="container content">
    <div class="row">
        <div class="col-lg-8 col-12">
            <div class="panel listing">
                ...
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-4 col-lg-3 col-lg-offset-1 col-12">
            <div class="sidebar">
                ...
            </div>
        </div>
   </div>
</div>

以上是现在的“香草”代码：我需要做些什么才能在手机和平板电脑上方添加侧边栏？

更新：由于某些提交（假设“RC1”不是我称之为RC！），接受的答案/实现似乎不再有效了。）{{3} }

如果有人有更新的答案，我会很感激。

Answer 1

您无法更改此类元素的顺序（Bootstrap中没有push-12或pull-12类），因此您必须更改标记中的顺序并在大屏幕上使用列排序

<div class="container content">
    <div class="row">
        <div class="col-lg-3 col-lg-offset-1 col-lg-push-8 col-sm-4 col-sm-offset-4">
            <div class="sidebar">
                SIDEBAR
            </div>
        </div>
        <div class="col-lg-8 col-lg-pull-4 col-sm-12">
            <div class="panel listing">
                PANEL
            </div>
        </div>
   </div>
</div>

<强> Demo fiddle

另外我刚刚发现NetDNA上托管的Bootstrap 3 CSS文件不是最新的，没有很好地实现推/拉类，所以我不得不下载官方文件并将css代码复制到小提琴

Bootstrap 3 RC1：列排序

1 个答案: