css - Navbar Toggler 仅适用于纵向，不适用于手机横向

Question

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

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

Answer 1

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

• 将其更改为 navbar-expand-md 将意味着全 View (不是汉堡菜单)在任何超过 768 像素的分辨率下显示

• 将其更改为 navbar-expand-lg 将意味着完整 View (不是汉堡菜单)将以超过 992 像素的任何分辨率显示

• 将其更改为 navbar-expand-xl 将意味着完整 View (不是汉堡菜单)将以任何超过 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