38

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

是否可以?

4

3 回答 3

83

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

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

Bootstrap 定义了以下宽度

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

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

于 2013-11-07T03:08:48.513 回答
18

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

.hidden-xs or .visible-xs

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

于 2015-10-21T22:47:33.240 回答
5

您可以在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上方可见。

于 2019-03-27T15:54:08.827 回答