Question

好的，所以我正在努力找出在使用媒体查询调整屏幕大小时处理删除内容的最佳方法。但是，我正在使用Twitter Bootstrap网格系统，它使它有点棘手，所以我很感激一些指示。

假设我有以下基本网格： -

<div class="container-fluid">
    <div class="row-fluid">
        <div id="left-content" class="span6">
            Left Content
        </div>
        <div id="right-content" class="span6">
            Right Content
        </div>
    </div>
</div>

我想使用css媒体查询，以便当屏幕宽度减小到一定大小时，我想隐藏#right-content这是直截了当的： -

@media screen and (max-width: 800px) {
    #right-content {
        display:none;
    }
}

但是，我确实需要将#left-content上的课程从span6更新为span12，以便内容与屏幕一样宽。我显然可以用JavaScript做到这一点，但这可以用纯css完成吗？

Answer 1

Bootstrap 3.0具有您可以使用的其他网格类：.col-sm-12和.col-md-6应该适合您。见http://getbootstrap.com/css/#grid-options

您的右栏可以简单地使用这些类：.hidden-xs .hidden-sm（http://getbootstrap.com/css/#responsive-utilities）

<div class="row">
    <div id="left-content" class="col-sm-12 col-md-6">
        Left Content
    </div>
    <div id="right-content" class="hidden-xs hidden-sm col-md-6">
        Right Content
    </div>
</div>

Answer 2

您可能想要升级到Bootstrap 3.0。进行了很多改进。

在3.0文档中，以下是完全符合您需要的响应式实用程序。

http://getbootstrap.com/css/#responsive-utilities

使用小尺寸填充屏幕宽度的列就像在您的div中添加类col-md-6一样简单。查看网格系统的3.0文档。

如何使用媒体查询更改Bootstrap Grid？

2 个答案: