Html 隐藏和显示取决于屏幕大小引导程序 3 个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28491930/
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
Hide and show depending on screen size bootstrap 3 classes
提问by Code Ratchet
for some this may seem very easy, and from what I have written I seems like it would do what I want it to, but sadly that isn't the case I have two images each image will be shown depending on the screen size, so for the first one in the HTML I have placed hidden-md, hidden-sm, hidden-xs which would give me the impression It will only show on large screens, the second one I only want to be visible on the tablets/mobiles so I have assigned the visible-sm, visible-md and hidden-lg but when I re-size the browser the first image doesn't dis-appear when I minimize down to a tablet size, however it does dis-appear when minimizing the browser down to a mobile device size, can anyone spot what I've done wrong?
对于某些人来说，这可能看起来很容易，从我写的内容来看，我似乎可以做我想做的事，但遗憾的是，我有两个图像，每个图像将根据屏幕大小显示，所以对于 HTML 中的第一个，我放置了 hidden-md、hidden-sm、hidden-xs 这会给我的印象它只会在大屏幕上显示，第二个我只想在平板电脑/手机上可见我已经分配了visible-sm、visible-md和hidden-lg，但是当我重新调整浏览器大小时，当我最小化到平板电脑大小时，第一个图像不会消失，但是当最小化浏览器缩小到移动设备大小，谁能发现我做错了什么？
<a class="navbar-brand hidden-md, hidden-sm, hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>
<a class="navbar-brand hidden-lg, visible-sm, visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>
回答by TheLeggett
You have commas in your class. Remove these, and it should work as you expect.
你的课上有逗号。删除这些，它应该按您的预期工作。
<a class="navbar-brand hidden-md hidden-sm hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>
<a class="navbar-brand hidden-lg visible-sm visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>
