Twitter’s Bootstrap 2最后添加了本机响应设计。但是,默认情况下,当浏览器宽度低于最小宽度时,它会将侧边栏放在顶部。我可以看到这对许多网站是如何工作的,但我实际上希望底部的侧边栏位于小宽度布局上。
我是Twitter Bootstrap的全新设计,并试图弄清楚bootstrap-response.css中的CSS的哪一部分,但是我没有看到@media(max-width:480px)部分的任何内容。
我查看了responsive design的Bootstrap文档,并没有太多的细节。
会爱一些指针…
解决方法
您可以通过翻转边栏和内容区域的容器来实现此效果,并按照您想要的方式浮动它们。这可以通过将自己的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/