Angular中Primeflex 3.3.1 Grid System多余右侧边距问题解决

Primeflex的.grid类默认会添加负的左右外边距，用来抵消列的内边距以实现全屏宽度布局，但如果不给它的父容器设置合适约束，就会超出视口范围，导致右侧出现多余边距和水平滚动条。以下是几种可行的解决办法：

• 使用Primeflex自带的container类：
  给.grid的父容器添加container类，这个类会自动设置左右内边距并限制最大宽度，刚好抵消grid的负margin，同时保证布局不会溢出：

  <div>
    <h2>Chargepoint Simulator</h2>
  </div>
  
  <div class="container">
    <div class="grid">
      <div class="col">
        TEST
      </div>
    </div>
  </div>
  

• 自定义父容器内边距：
  如果不需要container的最大宽度限制，可以给.grid的直接父容器设置与grid负margin值匹配的左右内边距（Primeflex默认负margin为1rem）：

  .grid-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  

  对应的HTML结构：

  <div>
    <h2>Chargepoint Simulator</h2>
  </div>
  
  <div class="grid-container">
    <div class="grid">
      <div class="col">
        TEST
      </div>
    </div>
  </div>
  

• 移除grid的负margin（不推荐）：
  直接覆盖.grid的负margin样式，但这会破坏Primeflex列间距的设计逻辑，可能导致列布局出现问题，仅在特殊场景下使用：

  .grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  

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