Bootstrap 3 仅在移动视图上应用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19827236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Apply CSS on Mobile View Only
提问by Navneil Naicker
I' am using Bootstrap 3, In the mobile view I would like to apply some CSS to fix up some bugs on mobile view. I have looked to documentations and Google it. I' am can't seem to find any clue on it.
我正在使用 Bootstrap 3，在移动视图中，我想应用一些 CSS 来修复移动视图上的一些错误。我查看了文档并谷歌了它。我似乎找不到任何线索。
Is it possible?
是否可以？
回答by Phil
Just use the appropriate media queries in your CSS, eg
只需在您的 CSS 中使用适当的媒体查询，例如
@media (max-width: 767px) {
/* CSS goes here */
}
Bootstrap defines the following widths
Bootstrap 定义了以下宽度
- Extra small devices (phones, less than 768px)
- Small devices (tablets, 768px and up)
- Medium devices (desktops, 992px and up)
- Large devices (large desktops, 1200px and up)
- 超小型设备（手机，小于 768px）
- 小型设备（平板电脑，768px 及以上）
- 中型设备（桌面，992px 及以上）
- 大型设备（大型桌面，1200px 及以上）
See http://css-tricks.com/css-media-queries/for some more information on media queries.
有关媒体查询的更多信息，请参阅http://css-tricks.com/css-media-queries/。
回答by unclejam
There are also responsive utilities, you can add classes to certain elements to either show or hide them at certain viewport sizes.
还有响应式实用程序，您可以向某些元素添加类，以在某些视口大小显示或隐藏它们。
.hidden-xs or .visible-xs
回答by RameshVel
You can use responsive display classes https://getbootstrap.com/docs/4.3/utilities/display/in Bootstrap 4
您可以在https://getbootstrap.com/docs/4.3/utilities/display/中使用响应式显示类 Bootstrap 4
So for example, you want to hide a specific element for only phones (in both portrait & landscape mode or xs and sm), you can do
因此，例如，您只想为手机隐藏特定元素（在纵向和横向模式或 xs 和 sm 中），您可以这样做
<div class="big_image d-none d-md-block">
</div>
What it does is set display:noneby default and makes it visible only from mdand above.
它的作用是display:none默认设置的，并使其只能从md上方和上方可见。
