Html 无法按特定分辨率折叠引导导航栏

当屏幕宽度为1280px时，我试图折叠

引导程序

导航栏，但是导航栏没有折叠，而是放在顶部，这是我的代码：

正文{
填充顶部：90px；
}
@介质（最小宽度：1280px）{
身体{
填充顶部：0；
}
}
@介质（最小宽度：1280px）{
身体{
左边距：232px；
}
}
.导航栏。固定左{
位置：固定；
排名：0；
左：0；
右：0；
z指数：1030；
}
@介质（最小宽度：1280px）{
.导航栏。固定左{
底部：0；
宽度：232px；
柔性流动：柱状nowrap；
调整项目：灵活启动；
}
.导航栏。固定-左侧。导航栏折叠{
flex-grow:0；
弯曲方向：立柱；
宽度：100%；
}
.navbar.左固定。navbar折叠。navbar导航{
弯曲方向：立柱；
宽度：100%；
}
.navbar.fixed-left.导航栏折叠.导航栏导航.导航项目{
宽度：100%；
}
.navbar.fixed-left.导航栏折叠.导航栏导航.导航项.下拉菜单{
排名：0；
}
}
@介质（最小宽度：1280px）{
.导航栏。固定左{
右：自动；
}
.navbar.fixed-left.navbar导航项目。下拉切换：后{
边框顶部：0.3em实心透明；
左边框：0.3em实心；
边框底部：0.3em实心透明；
边界权：无；
垂直对齐：基线；
}
.navbar.fixed-left.navbar导航项目.下拉菜单{
左：100%；
}
}

与对导航栏使用
.fixed top
时相同-添加类
.fixed left
或
.fixed right
在需要的地方

单击下面的按钮，相应的类将添加到示例导航栏中

固定左
固定顶
（原件）
固定权利
从中选择另一个引导主题

引导程序最近的断点位于

1200px

。我建议您坚持使用它，因为这样可以避免过度的布局更改。如果您愿意将断点移动到

@media 1200px

以匹配引导，只需将类

.navbar expand md

更改为

。navbar expand xl

，即可

代码笔：

编辑：

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

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

---

（这已经存在于您的原始代码中，但没有

！important

，它将被引导的默认设置覆盖到

边距：0；

）

为什么特别

1280px

？Bootstrap使用

@介质（最小宽度：1200px）

，因此您将有一些不必要的布局中断，并且您必须做额外的工作来设计

1200px-1280px

之间的狭窄空间。如果我将类更改为

navbar expand xl

，左侧的容器不会满行，似乎由于某种原因断点没有触发correctly@sfarzoso在这个代码笔中，它似乎工作得很好：。也许我误解了你？我的意思是，正确的容器应该在导航栏附近，而不是在导航栏下面：应该像：但是有不同的breakpoints@sfarzoso哦你的意思是导航栏和身体不应该重叠。我已经编辑了我的答案。@sfarzoso。。。。你说得对，我已经修好了。谢谢<代码>1200px正确，而不是

1201px

。