用Bootstrap实现指定响应式布局并解决右侧多余内边距问题

一、右侧多余内边距的修复 #

Bootstrap栅格有固定结构规范：.row必须被.container或.container-fluid包裹——因为.row自带左右负边距，用来抵消.col-*默认的15px左右内边距，不按这个结构写就会出现侧边内边距异常。

修复步骤：

1. 给所有.row套上容器，标准结构示例：

   <div class="container">
     <div class="row">
       <!-- 你的列元素 -->
     </div>
   </div>
   

2. 检查自定义样式，删掉给列或容器额外加的padding-right规则。

二、调整布局匹配你的预期效果 #

针对不同断点设置列宽度，同时控制桌面端额外的Graph显示，以下是精准匹配需求的代码：

完整HTML结构 #

<div class="container">
  <!-- 第一行：Graph + A -->
  <div class="row mb-2">
    <div class="col-12 col-lg-6">Graph</div>
    <div class="col-12 col-md-6 col-lg-6">A</div>
  </div>
  <!-- 第二行：仅桌面端显示Graph + B -->
  <div class="row">
    <div class="col-lg-6 d-none d-lg-block">Graph</div>
    <div class="col-12 col-md-6 col-lg-6">B</div>
  </div>
</div>

各断点效果说明 #

• 移动端（<768px）：所有列用.col-12占满整行，呈现顺序：

  Graph
  A
  B
  

• 平板端（768px-991px）：Graph占满整行，A和B各占半行，呈现：

  Graph
  A B
  

• 桌面端（≥992px）：第一行Graph和A各占半行，第二行显示额外的Graph和B各占半行，呈现：

  Graph A
  Graph B
  

如果不需要行间距，可删掉.mb-2类。

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