twitter-bootstrap – Twitter Bootstrap 2：如何获得响应式设计

发布时间：2020-12-18 00:15:04 所属栏目：安全来源：网络整理

导读：Twitter’s Bootstrap 2最后添加了本机响应设计。但是，默认情况下，当浏览器宽度低于最小宽度时，它会将侧边栏放在顶部。我可以看到这对许多网站是如何工作的，但我实际上希望底部的侧边栏位于小宽度布局上。我是Twitter Bootstrap的全新设计，并试图弄清

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!