html - 菜单在移动浏览器桌面站点视图中不可见
问题描述
我使用 Bootstrap 进行设计并使用 标签作为菜单,我为不同尺寸的设备(lg 和 xs)制作了两个菜单,根据屏幕尺寸的设备都可以正常工作,但在 Mobile Browsers 桌面站点选项中看不到任何内容。请帮忙。
这是标题代码:
<header id="mad-header" class="mad-header header-3">
<div class="mad-pre-header">
<div class="container extra-width">
<div class="mad-header-items hide-mobile">
<div class="col-sm-1">
<a href="#" class="mad-link mad-logo"><img src="public/User/images/logo2.png" alt="" width="75"></a>
</div>
<div class="col-sm-8 hide-mobile">
<div class="mad-quick-links">
<a href="#" class="mad-link blink" target="_blank">COVID-19</a><span> | </span>
<a href="#" class="mad-link">MEDICINES</a> <span> | </span>
<a href="#" class="mad-link">LAB TESTS</a><span> | </span>
<a href="#" class="mad-link">ASK DOCTOR</a><span> | </span>
<a href="#" class="mad-link">AYURVEDA</a>
</div>
</div>
<div class="col-sm-3 col-xs-12 second-menu">
<div class="mad-quick-links">
<a href="#" class="mad-link">Login</a> <span> | </span>
<a href="#" class="mad-link">Sign Up</a><span> | </span>
<a href="#" class="mad-link">Offers</a>
</div>
</div>
</div>
<div class="hide-desktop show-mobile mob-nav">
<div class="row text-center topmenu">
<div class="col-xs-2 logo-mob">
<div class="mobile-logo text-left">
<a href="#" class="mad-link mad-logo"><img src="public/User/images/logo2.png" alt="" width="75"></a>
</div>
</div>
<div class="col-xs-10 second-menu">
<div class="mad-quick-links">
<a href="#" class="mad-link blink" target="_blank">COVID-19</a><span> | </span>
<a href="#" class="mad-link">MEDICINES</a><span> | </span>
<a href="#" class="mad-link">LAB TESTS</a><span> | </span>
<a href="#" class="mad-link">ASK DOCTOR</a><span> | </span>
<a href="#" class="mad-link">AYURVEDA</a>
</div>
</div>
</div>
<div class="row mainmenu text-right">
<div class="col-xs-5 logo-mob" style="width:36%">
</div>
<div class="col-xs-6 none-mob">
<div class="mad-quick-links">
<a href="#" class="mad-link">Login</a> <span> | </span>
<a href="#" class="mad-link">Sign Up</a><span> | </span>
<a href="#" class="mad-link">Offers</a>
</div>
</div>
<div class="col-xs-1 menu-mob">
<nav class="mad-navigation-container text-left d-block d-sm-none show-mobile">
<ul class="mad-navigation mad-navigation--vertical-sm">
<li class="menu-item"><a href="#" class="mad-link blink" target="_blank">COVID-19</a></li>
<li class="menu-item"><a href="#" class="mad-link">MEDICINES</a></li>
<li class="menu-item"><a href="#" class="mad-link">LAB TESTS</a></li>
<li class="menu-item"><a href="#" class="mad-link">ASK DOCTOR</a></li>
<li class="menu-item"><a href="#" class="mad-link">AYURVEDA</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
我使用“hide-mobile”和“hide-desktop”类在大屏幕和小屏幕设备中显示标题。
请帮我解决这个问题。提前致谢。
解决方案
您可以使用引导类 ( .d-{breakpoint}-{value} for sm, md, lg, and xl.
) 来执行此操作:
<!-- For your mobile section : -->
<div class="mad-header-items hide-mobile d-none d-sm-block">
<!-- For your desktop section : -->
<div class="hide-desktop show-mobile mob-nav d-block d-sm-none">
- 您可以在Bootstrap Doc上找到更多信息。
- 此处列出了所有可能性。
- 所有断点都列在这里。
推荐阅读
- android - 如何更改 FAB 按钮中的背景颜色?
- reporting-services - 搜索 SSRS 报告的 XML 以查找自定义代码
- kubernetes - 更新现有的 Kubernetes golang Operator
- mysql - gatsby-source-mysql 只返回一个结果
- reporting-services - SSRS Count If 语句
- c - 隐式转换(U32 到 U8)不会引发警告
- arrays - 使用指针更改 C 函数中的 argv 字符串
- javascript - 当跨度悬停时显示不同类的多个元素
- symfony-panther - 如何在外部网站上使用 Panther 登录?
- python - python中的消除矩阵(高斯)