Bootstrap侧边栏覆盖仪表板，替换col-sm-2为何类可实现并列？

问题根因 #

你引入的是Bootstrap 4版本的资源，但用的是Bootstrap 3的Dashboard示例代码，两者栅格语法不兼容，加上侧边栏设置了position: fixed脱离文档流，才会出现内容被覆盖的问题：

1. Bootstrap 3的偏移类写法col-sm-offset-*在Bootstrap 4中已经废弃，新版偏移类格式为offset-{断点}-{列数}，原有偏移失效导致内容区没有预留侧边栏对应的左边距
2. fixed定位的元素脱离正常文档流，不会占据栅格行的空间，哪怕加了col类也不会把后面的内容挤开

解决方案 #

方案1：保留侧边栏固定悬浮效果（推荐）

不需要修改侧边栏的col-sm-2类，只需要把内容区.main元素的原有类：

col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2

替换为Bootstrap 4对应的写法即可：

col-sm-10 offset-sm-2

改完后内容区会自动预留2列的左边距，刚好放下宽度为2列的固定侧边栏，不会出现覆盖。

方案2：仅修改侧边栏类适配原有内容区代码

如果你不想改动内容区的类，可以直接把侧边栏的col-sm-2替换为col-sm-3，侧边栏宽度会变成3列，和内容区原有的3列偏移刚好对应，也能解决覆盖问题，只是侧边栏会比原来宽1列。

方案3：侧边栏不固定，随页面滚动

如果你不需要侧边栏固定悬浮，删掉CSS中.sidebar媒体查询里的position: fixed相关属性，让侧边栏回到正常文档流，col-sm-2类可以直接保留，内容区只需要删掉偏移类改成col-sm-10就能正常并排。

内容的提问来源于stack exchange，提问作者HelloWorld1