根据屏幕大小隐藏和显示 bootstrap 3 类答案

【问题标题】：Hide and show depending on screen size bootstrap 3 classes根据屏幕大小隐藏和显示 bootstrap 3 类
【发布时间】：2015-02-13 03:21:55
【问题描述】：

对于某些人来说，这似乎很容易，从我所写的内容来看，我似乎会做我想做的事，但遗憾的是，我有两个图像，每个图像将根据屏幕显示大小，所以对于 HTML 中的第一个，我放置了 hidden-md、hidden-sm、hidden-xs 这会给我的印象它只会显示在大屏幕上，第二个我只想在平板电脑上可见/mobiles 所以我已经分配了 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>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您的班级中有逗号。删除这些，它应该可以正常工作。

<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>

【讨论】：