Bootstrap卡片与左侧筛选表单对齐问题求助

卡片对齐异常是因为侧边栏#sidebar使用了float:left，且未纳入Bootstrap栅格体系——Bootstrap的row是flex布局容器，浮动元素会打乱flex的正常排列逻辑，导致第四个卡片被侧边栏的浮动空间挤占，无法按预期换行对齐。

1. 将侧边栏纳入栅格容器 #

把#sidebar包裹在Bootstrap的col容器中，确保和卡片的列数总和在各断点下符合12格规则：

<!-- 替换原<section id="sidebar">的直接放置方式 -->
<div class="col-xl-2 col-lg-3 d-none d-lg-block">
  <section id="sidebar">
    <!-- 侧边栏原有内容保持不变 -->
  </section>
</div>

这里用d-none d-lg-block控制侧边栏仅在大屏（lg及以上）显示，和你已有的移动端筛选栏#mobile-filter形成互补。

2. 移除侧边栏的浮动样式 #

删除SCSS中#sidebar的float: left属性，并将宽度改为100%（由栅格容器控制宽度）：

#sidebar {
  width: 100%;
  padding: 10px;
  margin: 0;
  /* 移除 float: left; 这一行 */
}

3. 调整卡片的结构与列类 #

将卡片统一放到一个栅格容器内，确保布局层级清晰：

<!-- 在侧边栏之后添加卡片容器 -->
<div class="col-xl-10 col-lg-9">
  <div class="row">
    <!-- 原卡片元素放到这个row里 -->
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3 boat" *ngFor="let boat of boats">
      <div class="card">
        <!-- 卡片原有内容保持不变 -->
      </div>
    </div>
  </div>
</div>

调整后，在xl断点下侧边栏占2列，卡片容器占10列，容器内的卡片每4个占满一行；lg断点下侧边栏占3列，卡片容器占9列，每3个卡片一行，完全符合Bootstrap的栅格逻辑。

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