Twitter Bootstrap 2:如何获得响应式设计,将侧边栏放在底部而不是顶部？

Question

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

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

我查看了响应式设计的Bootstrap文档,但没有太多细节.

会喜欢一些指针......

Answer 1

您可以通过翻转侧边栏和内容区域的容器并按照您希望的方式浮动它们来实现此效果.通过将自己的id分配给侧边栏和内容区域并执行如下操作,可以干净利落地完成这一操作而不会过多地使用引导程序样式表:

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/

Answer 2

这可能很容易.

// Pull right sidebar to top
<div class="row">
  <div class="span3 pull-right">Right sidebar</div>
  <div class="span9">Content section</div>
</div>

// Or pull left sidebar to bottom side
<div class="row">
  <div class="span9 pull-right">Content section</div>
  <div class="span3">Left Sidebar</div>
</div>