Bootstrap 3 仅在移动视图上应用 CSS

Posted 2023-03-06

【中文标题】Bootstrap 3 仅在移动视图上应用 CSS

【英文标题】：Bootstrap 3 Apply CSS on Mobile View Only

【发布时间】：2013-11-18 14:01:51

【问题描述】：

我正在使用 Bootstrap 3，在移动视图中我想应用一些 CSS 来修复移动视图上的一些错误。我查看了文档并谷歌了它。我似乎找不到任何线索。

有可能吗？

【参考方案1】：

只需在您的 CSS 中使用适当的媒体查询，例如

@media (max-width: 767px) 
    /* CSS goes here */

Bootstrap 定义了以下宽度

超小型设备（手机，小于 768 像素） 小型设备（平板电脑，768 像素及以上） 中型设备（台式机，992 像素及以上） 大型设备（大型桌面，1200 像素及以上）

有关媒体查询的更多信息，请参阅http://css-tricks.com/css-media-queries/。

【参考方案2】：

还有响应式实用程序，您可以向某些元素添加类，以在某些视口大小显示或隐藏它们。

.hidden-xs or .visible-xs

http://getbootstrap.com/css/#responsive-utilities

【讨论】：

bootstrap 4 不再支持此功能。请在下面查看我的答案以获取新版本

【参考方案3】：

您可以在Bootstrap 4 中使用响应式显示类https://getbootstrap.com/docs/4.3/utilities/display/

因此，例如，您想只为手机隐藏特定元素（纵向和横向模式或 xs 和 sm），您可以这样做

<div class="big_image d-none d-md-block">
</div>

它的作用是默认设置display:none，并使其仅在md 及以上可见。