在下面的示例中，navbar在调整浏览器窗口大小时被正确隐藏。然而，它是而不是隐藏(总是可见)当使用"工具"设备工具栏时在铬。
这个问题似乎不是来自chromium的devtools，因为一旦部署，在移动设备(谷歌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>你需要添加:
<meta name="viewport" content="width=device-width, initial-scale=1">
…。否则chrome只会缩放(缩放)以适应。
见:https://getbootstrap.com/docs/5.0/getting-started/introduction/starter-template