导航栏切换器仅在纵向，而不是横向移动

Posted 2023-03-10

【中文标题】导航栏切换器仅在纵向，而不是横向移动

【英文标题】：Navbar Toggler only in Portrait, not Landscape on mobile

【发布时间】：2019-06-01 21:57:36

【问题描述】：

我正在尝试使用 Bootstrap 4 制作一个响应式网站。在我的手机上，菜单会以横向扩展，这会扭曲它。如何强制菜单在横向时保持折叠状态？

当我意识到问题时，我已经上传了 90% 的页面。我试图通过创建一个默认折叠的菜单和一个默认展开的菜单来解决它。然后根据媒体查询隐藏一个或另一个。这完全破坏了菜单。还尝试使用网络检查器对代码进行逆向工程，然后尝试将其添加到我的移动媒体查询中也失败了。事实上，每当我尝试用自己的方式覆盖 Bootstrap 媒体查询时，它都会被忽略。我正在使用引导 css、我的 mobile.css 以及针对不同手机的媒体查询和用于自定义类和 id 的 design.css。检查网站，以便您可以看到问题：lightflashproductions.com

【参考方案1】：

您的导航元素具有类navbar-expand-sm...

将其更改为 navbar-expand-md 将意味着以超过 768 像素的任何分辨率显示完整视图（而不是汉堡菜单）

将其更改为 navbar-expand-lg 将意味着在超过 992 像素的任何分辨率下都会显示完整视图（而不是汉堡菜单）

将其更改为 navbar-expand-xl 将意味着以超过 1200 像素的任何分辨率显示完整视图（而不是汉堡菜单）

您可以在横向模式下检查手机的分辨率并确定合适的类别

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-xl bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

更多information here

【讨论】：

谢谢。我觉得自己没有发现这一点有点愚蠢。它现在就像一个魅力。

我们都去过那里......快乐编码:)