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

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>