Angular中如何消除导航栏与新增集合组件间的间距？

我来帮你搞定这个问题，按照以下步骤操作就能实现需求并消除组件间的间距：

1. 正确引入Bootswatch Flatly样式 #

首先确保Angular项目中已经引入了Flatly模板的CSS文件。你可以通过修改angular.json的styles数组来配置，这样样式会全局生效：

"styles": [
  // 先引入基础Bootstrap（如果项目依赖）
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  // 替换成你Flatly CSS文件的实际本地路径
  "src/assets/css/flatly/bootstrap.css"
]

2. 确认组件结构 #

你的根组件模板已经正确拆分了导航栏和新增集合组件，这个结构完全没问题：

<div>
  <app-navbar></app-navbar>
  <app-new-set></app-new-set>
</div>

导航栏组件的模板代码也符合Bootstrap的结构规范：

<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
  <div class="container">
    <!-- 这里放置你的导航栏菜单、logo等内容 -->
  </div>
</div>

3. 移除组件间的间距 #

组件之间的间距通常来自Bootstrap的默认样式或元素自带的margin/padding，我们可以通过以下CSS调整彻底消除：

处理fixed导航栏的影响+消除组件间距 #

在全局样式文件（比如src/styles.css）中添加以下样式：

/* 抵消fixed-top导航栏的高度，避免下方组件被遮挡 */
body {
  padding-top: 56px; /* 这个值对应Bootstrap默认navbar的高度，可根据你的导航栏实际高度调整 */
  margin: 0;
}

/* 直接移除app-navbar和app-new-set之间的顶部间距 */
app-navbar + app-new-set {
  margin-top: 0 !important;
}

/* 确保app-new-set组件本身没有默认的顶部margin */
app-new-set {
  display: block;
  margin-top: 0 !important;
}

额外检查：导航栏本身的底部间距 #

如果导航栏组件自带了margin-bottom，也需要一并移除：

.navbar {
  margin-bottom: 0 !important;
}

如果做完以上操作还有残留间距，建议打开浏览器开发者工具（F12），选中对应的元素查看margin/padding属性，定位到具体的样式来源后再针对性调整。

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