5

我使用 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 ，但即使我的浏览器更大，它也会直接隐藏。

4

3 回答 3

19

Bootstrap 3 的正确答案

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

Bootstrap 响应式实用程序类的屏幕截图

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

于 2015-03-25T05:15:59.127 回答
4

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

    <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>
于 2013-08-26T10:03:27.150 回答
0

根据您的要求在 bootstrap hidden-phone hidden-tablet 中使用可见性类

 <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>
于 2013-08-26T09:33:28.693 回答