使用bootstrap的响应式css规则

Question

我希望我的网站的某些部分在移动设备上减小尺寸.是否可以通过引导程序触发这些更改,而不是根据页面宽度手动添加响应式css规则？

例如,通过反复试验,我发现bootstrap3从固定宽度切换到可变宽度,并且navbar只要浏览器宽度小于,就会折叠767px.我希望我的页面的其他元素可以同时设置样式.是否有自然/本机方式从引导响应规则触发/继承这些更改,而不是手动添加

@media screen and (min-width: 767px)

Answer 1

最好的方法是在代码中加入bootstrap类.另外,使用实用程序类来按设备显示和隐藏内容.他们将使用以下类隐藏或显示给定屏幕大小的div:

.visible-phone   
.visible-tablet  
.visible-desktop 
.hidden-phone    
.hidden-tablet   
.hidden-desktop  

(手机767px及以下,平板电脑979px至768px).

更新:本周事情发生了变化,Bootstraps新版本有不同的类:

Old = .visible-phone new = .visible-sm

Old = .visible-tablet new = .visible-md

Old = .visible-desktop new = .visible-lg

Old = .hidden-phone new = .hidden-sm

Old = .hidden-tablet new = .hidden-md

Old = .hidden-desktop new = .hidden-lg

迁移指南中可以轻松查看更多更改

更新:不推荐使用以'visible'开头的新类,而是使用规范CSS显示属性的类.请参阅bootstraps说明