Html 如何使用媒体查询更改引导网格？

好的，所以我正在尝试找出在使用媒体查询调整屏幕大小时删除内容的最佳方法。然而，我使用的是Twitter引导网格系统，这使得它有点棘手，所以我希望能得到一些提示

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

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

---

但是，我确实需要将

#left content

上的类从

span6

更新到

span12

，以便内容与屏幕一样宽。很明显，我可以用JavaScript实现这一点，但可以用纯css实现吗？

您可能需要升级到Bootstrap 3.0。做了很多改进

在3.0文档中，以下是响应性实用程序，它们完全满足您的需要

---

让一列以较小的尺寸填充屏幕的宽度非常简单，只需将class

col-md-6

添加到您的div中即可。请查看网格系统的3.0文档。

Bootstrap 3.0有其他可以使用的网格类：

。col-sm-12

和

。col-md-6

应该适合您。看

右栏可以简单地使用类：

.hidden xs.hidden sm

（）

左内容
正确内容

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

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