5

好的，所以我正在尝试找出在使用媒体查询调整屏幕大小时处理删除内容的最佳方法。但是，我正在使用 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从span6to更新课程，span12以便内容与屏幕一样宽。我显然可以用 JavaScript 做到这一点，但可以用纯 css 做到这一点吗？

4

2 回答 2

9

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>
于 2013-09-10T20:01:39.653 回答
1

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

在 3.0 文档中，这里有一些响应式实用程序可以满足您的需求。

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

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

于 2013-09-10T19:56:45.083 回答