1

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

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

我还注意到 GitHub 上的 Bootstrap 存储库上关于这种行为的一些动作（未解决的问题），但我可能只是混淆了一些事情。

<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！），似乎已接受的答案/实现不再有效：https ://github.com/twbs/bootstrap/commits/ 3.0.0-wip

如果有人有更新的答案，我将不胜感激。

4

1 回答 1

2

您不能像这样更改元素的顺序（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>

演示小提琴

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

于 2013-08-12T06:35:23.877 回答