Question

对于某些人来说这似乎很容易，而且根据我所写的内容，我似乎会按照自己的意愿行事，但遗憾的是，我不会有两张图片，每张图片都会依赖于屏幕尺寸，所以对于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>

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

隐藏和显示取决于屏幕大小bootstrap 3类

1 个答案: