twitter-bootstrap - 推特 Bootstrap 2 : How to get responsive design to place sidebar on the bottom instead of top?

Question

Twitter's Bootstrap 2最后添加了原生响应式设计。但是，默认情况下，当浏览器宽度低于最小宽度时，它会将侧边栏放在顶部。我可以看到这对许多网站来说是如何工作的，但我实际上想要小宽度布局底部的侧边栏。

我是 Twitter Bootstrap 的新手，并试图弄清楚 bootstrap-response.css 中 CSS 的哪一部分，但我在 @media (max-width: 480px) 的部分中没有看到任何内容.

我查看了 responsive design 的 Bootstrap 文档。并且没有太多细节。

会喜欢一些指针...

Answer 1

您可以通过翻转侧边栏和内容区域的容器并以您想要的方式 float 它们来实现此效果。这可以通过将您自己的 id 分配给侧边栏和内容区域并执行以下操作来干净地完成，而不会过多地使用 Bootstrap 样式表:

CSS

.sidebar-nav {
    padding: 9px 0;
    width:100%;
}

#sidebar {
    float:left;
    margin-left:0;
}

#content {
    float:right !important;
    margin-left:auto;
}

@media (max-width: 767px) {
    #sidebar {
        display: inline-block;
        margin-top: 20px;
        width: 100%;
    }

    #content {
        float:none !important;
        margin-left:0;
    }
}

然后你所要做的就是像这样翻转容器 div:

<div id="content" class="span9"> ... </div> /* item you want up top first */
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */

演示: http://jsfiddle.net/andresilich/YEUwN/1/show/
在这里编辑: http://jsfiddle.net/andresilich/YEUwN/1/