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-12pull-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 回答