如何在Angular项目中实现Bootstrap响应式弹性布局？

我希望在Angular项目中实现目标页面布局，但未得到预期效果。使用Bootstrap的rows和columns实现响应式布局，需要修改代码以实现响应式框架，确保屏幕尺寸缩小时区块自动上下排列。

问题分析 #

原代码存在几个破坏Bootstrap响应式逻辑的问题：

• 自定义的.block固定宽度width:40%会覆盖Bootstrap栅格的自动适配
• .green区块直接使用row类并添加margin，与Bootstrap row的负margin布局逻辑冲突
• 列元素未添加移动端断点类，小屏幕下无法自动堆叠

修改后的代码 #

CSS代码

.red {
  height: 100vh;
  background-color: aqua;
}
.green {
  height: 30%;
  padding: 1rem; /* 用内边距替代margin，避免和row冲突 */
  background-color: green;
}
.bleu {
  background-color: blue;
  padding: 1rem;
}
.block {
  background-color: white;
  height: 300px;
}

HTML代码

<div class="container-fluid p-0"> <!-- 用container-fluid消除默认边距，适配全屏 -->
  <div class="row">
    <!-- 侧边栏：大屏占2列，小屏占满整行 -->
    <div class="col-12 col-md-2 red">
      sidebar
    </div>
    <!-- 主内容区：大屏占10列，小屏占满整行 -->
    <div class="col-12 col-md-10 bleu">
      <h1> overview </h1>
      <!-- 移除row类，改用普通容器 -->
      <div class="green mb-3"> block </div>
      <!-- 用g-3控制列间距，替代自定义margin -->
      <div class="row g-3">
        <!-- 大屏各占5列，小屏自动占满整行 -->
        <div class="col-12 col-md-5 block">
          block1
        </div>
        <div class="col-12 col-md-5 block">
          block2
        </div>
      </div>
    </div>
  </div>
</div>

修改说明 #

1. 响应式断点适配：给所有列添加col-12（移动端）和col-md-*（平板及以上）类，确保屏幕缩小时自动堆叠
2. 移除冲突样式：删除.block的固定宽度，依赖Bootstrap栅格控制宽度；将.green的margin改为padding，避免与row的负margin冲突
3. 规范Bootstrap结构：row仅作为列的容器使用，内容块直接用普通div；用g-3（栅格间距）替代自定义margin，保持布局一致性
4. 全屏适配：外层用container-fluid消除默认边距，实现全屏布局

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