Question

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

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

我查看了responsive design的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>

Answer 3

这是Andres Ilich回答这个问题的。我没有办法在上面发表评论或直接与他联系。所以我向主持人道歉。

为了让这个帖子更有用，我想知道“那么你需要做的就是像这样翻转容器div：”容器div如何被翻转？代码演示/编辑对于像我这样并不熟悉该技术的人来说仍然不清楚。我无法弄清楚它在做什么以及它是如何工作的。它几乎看起来像一些javascript正在采取行动。理想情况下，会有一个简单的例子，只有两个div和最小的css指出“翻转”发生在哪个css线上。

如果有人有时间详细说明，我将非常感激。

Answer 4

我创建了一个网格＆＃34;扩展＆＃34;允许流体网格的源排序 - 它可以进行优化，但它可以完成工作。只需使用col-pull-#＆amp; col-push-#（其中＃是您要拉/推的列数）。另外，要覆盖第一个元素的边距，请在要在行中首先显示的元素中添加一个first类。请参阅演示并获取HTML / CSS / LESS：

http://jsfiddle.net/NGuL2/3/embedded/result/

Answer 5

没有优化的解决方案，但这是我如何做到的：

<script type="text/javascript">
$(window).resize(function() {
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
    else{
        $(".main").insertAfter(".sidebar");
    }
});

$(document).ready(function(){
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
});
</script>

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

5 个答案: