如何使用bootstrap来隐藏其中一个div当缩放浏览器窗口尺寸变小时

3okqufwl 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(182)

我使用bootstrap来设计我的Web UI，现在我有如下需求：
我将下面的div结构定义为它们的div id：第1部分和第2部分

<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中作为<div id="part1" class="col-md-6 collapse">，但即使我的浏览器更大，它也会直接隐藏。

twitter-bootstrap

来源：https://stackoverflow.com/questions/18440644/how-to-use-bootstrap-to-hide-one-of-div-when-zoom-browser-windows-size-smaller

3条答案

按热度按时间

izj3ouym1#

Bootstrap 3的正确答案

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

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

赞(0）回复(0）举报 2022-12-07

nuypyhwy2#

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

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

赞(0）回复(0）举报 2022-12-07

hfyxw5xn3#

根据您的要求在引导程序中使用可视性类隐藏电话隐藏平板电脑

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

赞(0）回复(0）举报 2022-12-07

我来回答

如何使用bootstrap来隐藏其中一个div当缩放浏览器窗口尺寸变小时

3条答案

Bootstrap 3的正确答案

相关问题

热门标签

最新问答