无法在特定分辨率下折叠引导程序导航栏

Question

当屏幕宽度为 1280px 时，我试图折叠Bootstrap导航栏，但不是让导航栏折叠，而是导航栏位于顶部，这是我的代码：

 body { padding-top: 90px; } @media (min-width: 1280px) { body { padding-top: 0; } } @media (min-width: 1280px) { body { margin-left: 232px; } } .navbar.fixed-left { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; } @media (min-width: 1280px) { .navbar.fixed-left { bottom: 0; width: 232px; flex-flow: column nowrap; align-items: flex-start; } .navbar.fixed-left .navbar-collapse { flex-grow: 0; flex-direction: column; width: 100%; } .navbar.fixed-left .navbar-collapse .navbar-nav { flex-direction: column; width: 100%; } .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item { width: 100%; } .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu { top: 0; } } @media (min-width: 1280px) { .navbar.fixed-left { right: auto; } .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after { border-top: 0.3em solid transparent; border-left: 0.3em solid; border-bottom: 0.3em solid transparent; border-right: none; vertical-align: baseline; } .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu { left: 100%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" id="theme_link" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/materia/bootstrap.min.css"/> <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-left"> <a class="navbar-brand" href>Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link">Home</a> </li> <li class="nav-item"> <a class="nav-link">About</a> </li> <li class="nav-item"> <a class="nav-link">Contact</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item">Action</a> <a class="dropdown-item">Another action</a> <a class="dropdown-item">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item">Separated link</a> <a class="dropdown-item">One more separated link</a> </div> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-class="fixed-left"> <i class="fa fa-arrow-left"></i> Fixed Left </a> </li> <li class="nav-item"> <a class="nav-link" data-class="fixed-top"> <i class="fa fa-arrow-up"></i> Fixed Top <small>(original)</small> </a> </li> <li class="nav-item"> <a class="nav-link" data-class="fixed-right"> <i class="fa fa-arrow-right"></i> Fixed Right </a> </li> </ul> </div> </nav> <div class="container"> <div class="jumbotron"> <h1 class="display-4"> Bootstrap Navbar Sidebar <br> <small>Fixed to Left or Right</small> </h1> <p> <strong> Use classic Bootstrap navbar as sidebar, on left or right side. </strong> </p> <p> <a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar" data-icon="octicon-star" data-show-count="true" aria-label="Star mladenplavsic/bootstrap-navbar-sidebar on GitHub">Star</a> <a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork mladenplavsic/bootstrap-navbar-sidebar on GitHub">Fork</a> <a class="github-button" href="https://github.com/mladenplavsic" aria-label="Follow @mladenplavsic on GitHub">Follow @mladenplavsic</a> </p> <p>Same as when using <code>.fixed-top</code> for navbar - add class <code>.fixed-left</code> or <code>.fixed-right</code> where needed.</p> <p>Click buttons below, and appropriate class will be added to example navbar.</p> <div class="btn-group" role="group"> <button type="button" data-class="fixed-left" class="btn btn-primary"> <i class="fa fa-arrow-left"></i> Fixed Left </button> <button type="button" data-class="fixed-top" class="btn btn-primary"> <i class="fa fa-arrow-up"></i> Fixed Top <small>(original)</small> </button> <button type="button" data-class="fixed-right" class="btn btn-primary"> <i class="fa fa-arrow-right"></i> Fixed Right </button> </div> </div> <div class="card"> <div class="card-body"> <div class="form-group"> <label> Select another bootstrap theme from <a href="https://bootswatch.com/" target="_blank">Bootswatch</a> </label> <select class="form-control width-md" id="theme_select" onchange="selectTheme(value)"></select> </div> </div> </div> </div>

正如你所看到的，我在媒体查询中设置了1280px ，但由于某种原因，导航栏而不是折叠显示为顶栏，我做错了什么？

Answer 1

Bootstrap 的最近断点是1200px 。 我建议坚持使用它，因为这样可以避免过度的布局更改。 如果您愿意将断点移动到@media 1200px以匹配 Bootstrap，您只需将类.navbar-expand-md更改为.navbar-expand-xl ，就是这样。

代码笔： https ://codepen.io/Terrafire123/pen/NWRKdKR

编辑：

如果您只想防止侧边栏与正文重叠，则可以添加以下内容：

@media (min-width: 1200px) {
  body { 
    margin-left: 232px !important; 
  }
}

（这已经存在于您的原始代码中，但如果没有!important ，它将被覆盖为margin:0;通过 Bootstrap 的默认设置。）