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

Question

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

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

我在这里错过了什么？

<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>

Answer 1

您需要添加：

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

...行。否则 chrome 只会缩放（缩放）以适合。

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

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

Bootstrap 5 hide col when device smaller than breakpoint size

mobile

responsive-design

grid

breakpoints

bootstrap-5