mobile - 当设备小于断点大小时，Bootstrap 5 隐藏列

问题描述

在以下示例中，navbar在调整浏览器窗口大小时正确隐藏了。但是，在 Chromium 中使用“Toogle 设备工具栏”时，它永远不会隐藏（始终可见）。

问题似乎不是来自铬的开发工具，因为一旦部署，在移动设备（谷歌浏览器或三星互联网浏览器）上显示它仍然会显示导航栏。

我在这里想念什么？

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row justify-content-md-start justify-content-center">
        <div class="col-2 d-none d-md-block" style="background-color: coral;">
          navbar
        </div>
        <div class="col-12 col-sm-10 col-md-8" style="background-color: aqua;">
          content
        </div>
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  </body>
</html>

标签： mobileresponsive-designgridbreakpointsbootstrap-5

您需要添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

...线。否则 chrome 只会缩放（缩放）以适应。

请参阅：https ://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template

mobile - 当设备小于断点大小时，Bootstrap 5 隐藏列

问题描述

解决方案

推荐阅读