[英]Bootstrap 5 hide col when device smaller than breakpoint size
在以下示例中， navbar在调整浏览器 window 的大小时正确隐藏。 但是，在 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>
您需要添加：
<meta name="viewport" content="width=device-width, initial-scale=1">
...线。 否则 chrome 只会缩放（缩放）以适应。
请参阅： https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template
为什么android浏览器视口比手机的实际屏幕尺寸小得多，即使使用width = device-width？
[英]Why android browser viewport is much smaller than actual screen size of the mobile phone, even when using width=device-width?
Bootstrap .col 调整到桌面上的屏幕大小，但不适用于移动设备
[英]Bootstrap .col adjusts to screen size on desktop but not mobile
如何在小于600px的屏幕上“打开”页面加载的Bootstrap下拉菜单
[英]How to 'open' Bootstrap Dropdown menus on pageload on screens smaller than 600px
wp页面中较少的内容/元素，一次小于特定的宽度
[英]Lesser contents/elements in a wp-page once smaller than a specific size in width
如果屏幕尺寸小于Y，请在php文件的body标签内显示X
[英]Show X inside the body tag of a php file in case the screen size is smaller than Y
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.