Twitter Bootstrap 2:如何让响应式设计将侧边栏放在底部而不是顶部? [英] Twitter Bootstrap 2: How to get responsive design to place sidebar on the bottom instead of top?

问题描述

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

我是 Twitter Bootstrap 的新手，并试图找出 bootstrap-response.css 中 CSS 的哪一部分，但我在 @ 部分没有看到任何内容媒体(最大宽度:480 像素).

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

希望得到一些指点......

解决方案

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

CSS

.sidebar-nav {填充:9px 0;宽度:100%；}#侧边栏{向左飘浮;左边距:0;}#内容 {浮动:对！重要；左边距:自动；}@media(最大宽度:767px){#侧边栏{显示:内联块；边距顶部:20px；宽度:100%；}#内容 {浮动:无！重要；左边距:0;}}

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

... </div>/* 你想要的项目首先*/<div id="sidebar" class="span3">... </div>/* 最后一个要在下面渲染的项目 */

演示:http://jsfiddle.net/andresilich/YEUwN/1/show/在此处http://jsfiddle.net/andresilich/YEUwN/1/

Twitter's Bootstrap 2 finally added native responsive design. However, by default when the browser width is below a min width, it places the sidebar on top. I can see how this would work for many sites, but I actually want the sidebar at the bottom on small width layouts.

I'm brand new to Twitter Bootstrap and tried to figure out what part of the CSS in bootstrap-response.css, but I didn't see anything in the section for @media (max-width: 480px).

I looked at the Bootstrap documentation for the responsive design and there isn't much detail on it.

Would love some pointers...

解决方案

You can achieve this effect by flipping the containers for the sidebar and content area and just floating them the way you want to. This can be done cleanly without messing around too much with the bootstrap stylesheet by assigning your own ids to the sidebar and content area and doing something like this:

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;
    }
}

Then all you have to do is flip the container divs like so:

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

Demo: http://jsfiddle.net/andresilich/YEUwN/1/show/ Edit here: http://jsfiddle.net/andresilich/YEUwN/1/

这篇关于Twitter Bootstrap 2:如何让响应式设计将侧边栏放在底部而不是顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！