当缩放浏览器窗口大小较小时,如何使用引导程序隐藏div之一

Question

我使用bootstrap来设计我的Web UI,现在我有如下要求:

我定义了下面的div结构,因为它们的div id是:part1和part2

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="part1" class="col-md-6">
                    <div>
                        xxxx
                    </div>
                </div>
                <div id="part2" class="col-md-6">
                    <div>
                        yyy
                    </div>
                </div>
            </div>
        </div>
    </div>

现在我想在缩小浏览器窗口大小或我的手机浏览器时自动隐藏part1,我该如何实现这种效果？

BTW:我尝试将css"collapse"添加到part1 as,但它甚至直接隐藏我的浏览器更大.

Answer 1

Bootstrap 3的正确答案

使用实用程序类通过媒体查询通过decice显示和隐藏内容.尝试在有限的基础上使用这些,并避免创建完全不同版本的smae网站.相反,使用它们来补充每个设备的演示.

资料来源:http://getbootstrap.com/css/#responsive-utilities

Answer 2

这是一个工作代码，我已经测试过..

    <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ">.col-md-4</div>
    <div class="col-md-4 visible-lg">.col-md-4</div>
    </div>