如何修正Angular页面布局以实现灵活响应式效果？

我正在开发一个Angular应用，想要实现响应式页面布局，但使用row和col组件后没达到预期效果。以下是我的HTML代码和样式：

现有CSS代码 #

.red {
  height: 100vh;
  background-color: aqua;
}

.green {
  height: 30%;
  margin: 1%;
  background-color: green;
}

.bleu {
  background-color: blue;
}

.block {
  background-color: white;
  margin: 2%;
  width: 40%;
  height: 300px;
}

现有HTML代码 #

<div class="row">
  <div class="col-md-2 red ">
    sidebar
  </div>
  <div class="col-md-10  bleu">
    <h1> overview </h1>
    <div class=" row green"> block </div>
    <div class="row">
      <div class="col block">
        block1
      </div>
      <div class="col block ">
        block2
      </div>
    </div>
  </div>
</div>

我想要实现的效果：左侧是固定高度的侧边栏，右侧蓝色区域内包含顶部绿色块，下方是两个尺寸完全一致的白色block1和block2，整体布局需支持响应式适配。

修正方案 #

问题核心：自定义样式破坏了Bootstrap网格布局规则，未配置响应式断点适配。

修正后的CSS代码 #

.red {
  height: 100vh;
  background-color: aqua;
}

.green {
  height: 30%;
  margin: 1% 0; /* 仅保留上下margin，避免左右margin破坏容器宽度 */
  background-color: green;
}

.bleu {
  background-color: blue;
  padding: 1rem; /* 添加内边距，避免内容贴边 */
}

.block {
  background-color: white;
  margin: 2%;
  height: 300px;
  /* 移除自定义width，由Bootstrap网格类控制宽度 */
}

修正后的HTML代码 #

<div class="row g-0"> <!-- 消除row默认间距，让侧边栏与主内容区无缝衔接 -->
  <div class="col-md-2 red">
    sidebar
  </div>
  <div class="col-md-10 bleu">
    <h1> overview </h1>
    <div class="row green"> block </div>
    <div class="row">
      <!-- 中等屏幕及以上均分宽度，小屏幕自动堆叠 -->
      <div class="col-md-6 col-sm-12 block">
        block1
      </div>
      <div class="col-md-6 col-sm-12 block">
        block2
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 移除.block的width:40%，改用col-md-6实现宽度均分，col-sm-12保证小屏幕下两个区块垂直堆叠
• 调整.green的margin为上下方向，避免左右margin导致容器溢出
• 给主内容区添加内边距，优化内容显示效果
• 使用g-0清除row默认间距，解决侧边栏与主内容区的空隙问题

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