Bootstrap 3仅在Mobile View上应用CSS

Question

我正在使用Bootstrap 3,在移动视图中,我想应用一些CSS来修复移动视图中的一些错误.我查看了文档和谷歌.我似乎无法找到任何线索.

可能吗？

Answer 1

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

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

Bootstrap定义以下宽度

• 超小型设备(手机,小于768px)
• 小型设备(平板电脑,768px及以上)
• 中型设备(台式机,992px及以上)
• 大型设备(大型台式机,1200px及以上)

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

Answer 2

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

.hidden-xs or .visible-xs

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

Answer 3

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

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

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

它的作用是display:none默认设置的，并使其只能从md上方和上方可见。