使用Bootstrap v4.6容器与栅格列无法实现网页响应式布局如何解决

• 自定义CSS强制覆盖了Bootstrap栅格的自适应属性，你写的.row{width:900px;}直接把所有行的宽度锁死，栅格无法随屏幕宽度变化调整
• 所有自定义盒子（导航文字、侧边栏、卡片、搜索框等）都设置了固定的width、margin-left、padding-left数值，比如导航文字的padding-left:650px、搜索框的width:500px，小屏设备下内容直接溢出可视区域
• 栅格只配置了sm（≥576px）以上的断点，超小屏手机没有适配规则
• 栅格内的卡片额外加了左右margin，打破了Bootstrap自带的gutter宽度计算，导致列宽溢出换行

全部用Bootstrap自带的工具类替换自定义固定样式，不需要额外写媒体查询：

1. 首先删除自定义CSS里的.row{width:900px;}规则，恢复栅格的自适应能力
2. 替换所有固定边距、宽度为响应式工具类：
   • 顶部导航.box加d-flex align-items-center，删除.text-center的padding-left:650px，给GITHUB文字加mx-auto实现响应式居中
   • 搜索框删除固定width:500px、margin-left:250px，加w-100 w-md-75 my-3 mx-auto实现小屏占满、中屏以上75%宽度居中
   • 所有自定义盒子（.boxpart、.small-box、.box2）删除固定的margin、padding、width值，用m-*/p-*/w-*类设置响应式间距，比如.boxpart加mr-md-4 mr-0 w-100实现中屏以上右间距、小屏无间距占满宽度
3. 栅格补充超小屏适配规则，比如侧边栏改成col-12 col-sm-3，小屏自动占满整行堆叠，内容区改成col-12 col-sm-9，小屏接在侧边栏下方显示
4. 栅格列内的卡片不要加左右margin，如果需要间距用内边距或者嵌套div加padding实现，避免打破栅格列的宽度计算

<!-- 顶部导航 -->
<div class="box d-flex align-items-center">
  <span class="fa fa-github fa-2x"></span>
  <span class="mx-auto text-white">GITHUB</span>     
</div>
<div class="container">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-12 col-sm-3 mb-4 mb-sm-0">
      <div class="boxpart w-100"></div> 
    </div>
    <!-- 主内容区 -->
    <div class="col-12 col-sm-9">
      <input type="text" placeholder="Search" class="w-100 w-md-75 mb-4">
      <div class="row g-3">
        <div class="col-6 col-sm-3">
          <div class="small-box1 h-100"></div>
        </div>
        <div class="col-6 col-sm-3">
          <div class="small-box h-100"></div>
        </div>
        <div class="col-6 col-sm-3">
          <div class="small-box h-100"></div>
        </div>
        <div class="col-12 col-sm-6 mt-4 mt-sm-0">
          <div class="box2 h-100"></div>
        </div>
      </div>
    </div>
  </div>
</div>

/* 仅保留颜色、圆角等装饰样式，删除所有固定宽高、边距 */
body{
  background-color:#a9ba9d;
}
.box{
  background-color: #36454f;
  margin-bottom: 90px;
  padding: 1rem;
}
.fa{
  color:white;
}
.box2{
  background-color:#343434;
  border-radius:25px;
  min-height: 190px;
}
.boxpart{
  background-color:#343434;
  border-radius:25px;
  min-height: 500px;
}
.small-box, .small-box1{
  background-color:#343434;
  border-radius:25px;
  min-height: 160px;
}
input{
  background-color:#343434;
  padding: 0.5rem;
  border-radius:10px;
  border: none;
  color: #fff;
}
input::placeholder{
  color:grey
}

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