Bootstrap卡片组对齐问题咨询：如何避免遮挡左侧侧边栏

问题原因 #

卡片组遮挡侧边栏是未遵循Bootstrap栅格系统的布局规则，没有对侧边栏和卡片区域做合理的宽度拆分；无法实现居中/右对齐是因为没有给卡片组所在的row添加对应的flex对齐类。

修复方案 #

1. 核心调整逻辑 #

先将侧边栏和卡片区域放在同一层级的栅格列内，避免元素重叠，再给卡片组的row添加对齐类：

• 卡片组居中：给row添加justify-content-center类
• 卡片组右对齐：给row添加justify-content-end类

2. 完整可运行代码示例 #

<!-- 最外层容器，按需选择固定宽度container或全屏container-fluid -->
<div class="container-fluid">
  <div class="row">
    <!-- 左侧侧边栏，可根据需求调整栅格宽度占比 -->
    <div class="col-md-3">
      <!-- 侧边栏内容写在此处 -->
    </div>
    <!-- 右侧卡片承载区域 -->
    <div class="col-md-9">
      <!-- 卡片组容器，加justify-content-center实现居中，替换为justify-content-end实现右对齐 -->
      <div class="row row-cols-1 row-cols-md-4 g-4 justify-content-center">
        <div class="col">
          <div class="card">
            <img src="img/heart.jpg" class="card-img-top" alt="卡片配图">
            <div class="card-body">
              <h5 class="card-title">卡片标题</h5>
              <p class="card-text">这是一张长卡片，下方的说明文本作为额外内容的自然引导，该内容长度稍长。</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
             <img src="img/heart.jpg" class="card-img-top" alt="卡片配图">
            <div class="card-body">
              <h5 class="card-title">卡片标题</h5>
              <p class="card-text">这是一张长卡片，下方的说明文本作为额外内容的自然引导，该内容长度稍长。</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
           <img src="img/heart.jpg" class="card-img-top" alt="卡片配图">
            <div class="card-body">
              <h5 class="card-title">卡片标题</h5>
              <p class="card-text">这是一张长卡片，下方的说明文本作为额外内容的自然引导。</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
             <img src="img/heart.jpg" class="card-img-top" alt="卡片配图">
            <div class="card-body">
              <h5 class="card-title">卡片标题</h5>
              <p class="card-text">这是一张长卡片，下方的说明文本作为额外内容的自然引导，该内容长度稍长。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注意事项 #

• Bootstrap栅格系统必须严格遵循container > row > col的三层嵌套结构，否则会出现宽度、间距异常问题。
• 原代码中row-cols-md-5定义了中等屏幕下每行展示5张卡片，但你只提供了4张卡片的代码，若不需要预留空位可改为row-cols-md-4，避免出现多余空白列。
• 若你自定义了间距类g-8可直接保留，Bootstrap原生支持的间距范围为g-0到g-5，超出该范围的类不会生效。

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