Question

我正在尝试使用Bootstrap 4创建一个响应式网站。在我的手机上，菜单在“横向”中展开，这会使它失真。如何强制菜单保持横向折叠状态？

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

Answer 1

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

将其更改为navbar-expand-md意味着全屏（而不是汉堡菜单）将以768px以上的任何分辨率显示
将其更改为navbar-expand-lg意味着全屏（不是汉堡菜单）将以超过992px的任何分辨率显示
将其更改为navbar-expand-xl意味着可以以1200px以上的任何分辨率显示全屏（而不是汉堡菜单）
您可以在横向模式下检查手机的分辨率并确定合适的等级

<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

Navbar Toggler仅在纵向模式下，而在移动设备上不横向模式

1 个答案: