twitter-bootstrap 缩小浏览器窗口大小时如何使用引导程序隐藏 div 之一
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18440644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap to hide one of div when zoom browser windows size smaller
提问by Jerry Cai
I use bootstrap to design my web UI , and now I have a requirement as below:
我使用 bootstrap 来设计我的 web UI，现在我有如下需求：
I define the below div structure as their div ids are : part1and part2
我将下面的 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>
Now I want to hide the part1 automatically when shrink browser window size or my phone browser , How can I achieve this effect ?
现在我想在缩小浏览器窗口大小或我的手机浏览器时自动隐藏part1，我怎样才能达到这个效果？
BTW: I try to add css "collapse" to part1as , but it hide directly even my browser is larger .
顺便说一句：我尝试将 css "collapse" 添加到part1as ，但即使我的浏览器更大，它也会直接隐藏。
采纳答案by Prasanna Aarthi
This is a working code, I have tested..
这是一个工作代码，我已经测试过..
<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>
回答by Lorem Ipsum Dolor
Right Answer for Bootstrap 3
Bootstrap 3 的正确答案
Use utility classes for showing and hiding content by decice via media query. Try to use thses on a limited basis and avoid creating entirely differnet versions of the smae site. Instead, use them to complement each device's presentation.
使用实用程序类通过媒体查询按 decice 显示和隐藏内容。尝试在有限的基础上使用这些并避免创建完全不同的 smae 站点版本。相反，使用它们来补充每个设备的演示。
回答by Prasanna Aarthi
Use visiblity classes in bootstrap hidden-phone hidden-tablet based on your requirements
根据您的要求在 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>
