Bootstrap 切换显示在中等尺寸的屏幕上
Bootstrap Toggle shows up on medium size screen
使用 Bootstrap 4.3 制作响应式仪表板时，我 运行 遇到了中等屏幕的问题。当我调整 Google chrome 以检查不同尺寸的页面时，遗憾的是，当 chrome 调整为中等尺寸时，会出现 bootstrap 切换按钮。其他浏览器也是如此。下图是我chrome展示的页面。如图所示，内容消失和切换按钮出现的屏幕并不小：
以下是我的代码。如果您帮我解决问题，我将不胜感激。
@media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
<a href="#" class="text-white d-block pt-3 pb-3 h5 text-decoration-none text-center">ِDashboard</a>
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<a href="#" class="nav-link sidebar-menu sidebar-both-border pr-4"><i class="fas fa-home ml-2"></i>Home</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><a href="#" class="nav-link"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
为了方便起见，我从侧边栏菜单项中删除了一些行，因为我认为它们与大小调整和切换按钮没有任何关系。
哇，问题出在第一行。将第一行代码的 'navbar-expand-lg' 更改为 'navbar-expand-sm' 解决了我的问题。
您需要更改 navbar-expand-(value)Ex lg/md/sm 或 custom.you 可以试试这个我已经添加了您的代码。
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
<a href="#" class="text-white d-block pt-3 pb-3 h5 text-decoration-none text-center">ِDashboard</a>
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<a href="#" class="nav-link sidebar-menu sidebar-both-border pr-4"><i class="fas fa-home ml-2"></i>Home</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><a href="#" class="nav-link"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
使用 Bootstrap 4.3 制作响应式仪表板时，我 运行 遇到了中等屏幕的问题。当我调整 Google chrome 以检查不同尺寸的页面时，遗憾的是，当 chrome 调整为中等尺寸时，会出现 bootstrap 切换按钮。其他浏览器也是如此。下图是我chrome展示的页面。如图所示，内容消失和切换按钮出现的屏幕并不小：
以下是我的代码。如果您帮我解决问题，我将不胜感激。
@media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
<a href="#" class="text-white d-block pt-3 pb-3 h5 text-decoration-none text-center">ِDashboard</a>
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<a href="#" class="nav-link sidebar-menu sidebar-both-border pr-4"><i class="fas fa-home ml-2"></i>Home</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><a href="#" class="nav-link"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
为了方便起见，我从侧边栏菜单项中删除了一些行，因为我认为它们与大小调整和切换按钮没有任何关系。
哇，问题出在第一行。将第一行代码的 'navbar-expand-lg' 更改为 'navbar-expand-sm' 解决了我的问题。
您需要更改 navbar-expand-(value)Ex lg/md/sm 或 custom.you 可以试试这个我已经添加了您的代码。
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
<a href="#" class="text-white d-block pt-3 pb-3 h5 text-decoration-none text-center">ِDashboard</a>
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<a href="#" class="nav-link sidebar-menu sidebar-both-border pr-4"><i class="fas fa-home ml-2"></i>Home</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><a href="#" class="nav-link"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->