css - 使用 bootstrap 的响应式 css 规则

Question

我希望我网站的某些部分在移动设备上缩小。是否可以通过 Bootstrap 触发这些更改，而不是根据页面宽度手动添加响应式 css 规则？

例如，通过反复试验我发现 bootstrap3当浏览器宽度小于 767px 时，从固定宽度切换到可变宽度并折叠 navbar。我希望我的页面的其他一些元素同时设置样式。是否有一种自然/ native 的方式来触发/继承自 Bootstrap 响应规则的这些更改，而不是手动添加

@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 新版本有不同的类:

旧=.visible-phone 新=.visible-sm

旧 = .visible-tablet 新 = .visible-md

旧 = .visible-desktop 新 = .visible-lg

旧=.hidden-phone 新=.hidden-sm

旧=.hidden-tablet 新=.hidden-md

旧=.hidden-desktop 新=.hidden-lg

更多更改可在 the migration guide 轻松查看

更新:以“visible”开头的新类已被弃用，取而代之的是规范 CSS 显示属性的类。参见 bootstraps explanation