菜单在移动浏览器桌面站点视图中不可见

Posted

技术标签:

【中文标题】菜单在移动浏览器桌面站点视图中不可见【英文标题】:Menu Not Visible in Mobile browsers desktop site view 【发布时间】:2021-08-03 11:55:33 【问题描述】:

我使用 Bootstrap 进行设计,并使用 标签作为菜单,我为不同尺寸的设备(lg 和 xs)制作了两个菜单,根据屏幕尺寸的设备都可以正常工作,但在移动浏览器桌面上看不到任何东西站点选项。请帮忙。

这是标题代码:

<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"  ></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>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">MEDICINES</a> <span>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">LAB TESTS</a><span>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">ASK DOCTOR</a><span>&nbsp;|&nbsp;</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>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">Sign Up</a><span>&nbsp;|&nbsp;</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"  ></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>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">MEDICINES</a><span>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">LAB TESTS</a><span>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">ASK DOCTOR</a><span>&nbsp;|&nbsp;</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>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">Sign Up</a><span>&nbsp;|&nbsp;</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”类在大屏幕和小屏幕设备中显示标题。

请帮我解决这个问题。 提前致谢。

【问题讨论】:

【参考方案1】:

您可以使用引导类 (.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 上找到更多信息。 列出了所有可能性here。 所有断点都列在here。

【讨论】:

而如果你想使用Bootstrap 5,类是一样的,但是你可以找到文档here。

以上是关于菜单在移动浏览器桌面站点视图中不可见的主要内容,如果未能解决你的问题,请参考以下文章

带有桌面站点视图的移动设备上元素的绝对高度和宽度为100%

CSS背景色过渡在特定浏览器中不起作用(桌面+移动)

javascript代码在chrome移动浏览器中不起作用,但在桌面上它工作正常

汉堡菜单未在移动设备上显示

JavaScript:调整笔记本电脑的浏览器窗口大小(“移动” - “桌面” - “移动”)不会重启菜单状态

React Web App Routing 适用于桌面(包括移动开发视图),但不适用于移动浏览器