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

【问题标题】：Bootstrap 5 hide col when device smaller than breakpoint size当设备小于断点大小时，Bootstrap 5 隐藏列
【发布时间】：2021-02-18 05:26:05
【问题描述】：

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

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

我在这里错过了什么？

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

【问题讨论】：

我无法重现这种行为。它在较小设备上的 Chrome 开发工具中为我隐藏。
是的，由于某种原因，它在代码 sn -p 中运行时可以工作。可能需要复制粘贴到 html 文件中并在浏览器中打开。

标签： mobile responsive-design grid breakpoints bootstrap-5

【解决方案1】：

您需要添加：

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

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

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

【讨论】：

像魅力一样工作！