网站使用Bootstrap无响应问题求助：已尝试栅格布局仍未解决

你遇到的响应式失效问题，核心原因是滥用!important强制修改栅格列的固定宽度，直接破坏了Bootstrap响应式栅格的底层布局逻辑，咱们一步步来修复：

问题根源拆解 #

你给.col-sm-3加了width: 14% !important，还给.bg-2设了固定的86%宽度——Bootstrap的栅格系统本来是靠不同断点（比如sm/md/lg）自动调整列宽的，你硬把列宽锁死成固定值，不管屏幕尺寸怎么变化，列宽都不会自适应，响应式自然就失效了。

具体修复步骤 #

1. 移除破坏布局的强制宽度样式
   直接删掉这两行代码，让Bootstrap栅格系统自己处理宽度分配：

   .col-sm-3 { width: 14% !important; background-color: white !important; }
   .bg-2 { width: 86%; }
   

2. 用嵌套容器实现自定义样式需求
   如果确实需要调整侧边栏或主内容区的外观，别直接修改col类，而是在栅格列内部嵌套自定义容器，给内层容器加样式——这样既能保留栅格的响应式特性，又能实现自定义效果：

   <!-- 侧边栏结构 -->
   <div class="col-sm-3">
     <div class="custom-sidebar">
       <ul class="nav-pills">
         <!-- 导航内容 -->
       </ul>
     </div>
   </div>
   
   <!-- 主内容结构 -->
   <div class="col-sm-9">
     <div class="bg-2">
       <!-- 主内容 -->
     </div>
   </div>
   

   对应的CSS：

   .custom-sidebar {
     background-color: white;
     /* 这里可以添加padding、margin等样式，无需修改width */
   }
   .bg-2 {
     background-color: #d1d8e0;
     /* 继承父级col-sm-9的宽度，自动适配屏幕 */
   }
   

3. 确保引入响应式视图元标签
   这是Bootstrap响应式生效的核心前提，必须放在HTML的<head>标签内：

   <meta name="viewport" content="width=device-width, initial-scale=1">
   

4. 适配更小屏幕（可选）
   如果要让手机端显示更友好，给栅格列加上移动端优先的类，比如col-12 col-sm-3——这样在手机上侧边栏会占满整行，平板及以上设备才显示3列宽度：

   <div class="col-12 col-sm-3">...</div>
   <div class="col-12 col-sm-9">...</div>
   

5. 避免滥用!important
   这个属性会打乱CSS的优先级规则，后续调试会非常麻烦。尽量用更具体的选择器（比如.custom-sidebar ul li）来提升样式优先级，而非靠!important硬覆盖。

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