缩放浏览器窗口尺寸较小时如何使用引导程序隐藏其中一个 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，我该如何实现这个效果？

我尝试将 css“collapse”添加到 part1 as <div id="part1" class="col-md-6 collapse"> ，但即使我的浏览器更大，它也会直接隐藏。

原文由 Jerry Cai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Prasanna Aarthi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 3 的正确答案

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

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

原文由 X.Creates 发布，翻译遵循 CC BY-SA 4.0 许可协议