如何删除导航、文章和页脚之间的填充？

/* 覆盖Bootstrap的默认填充样式 */
.navbar {
  padding: 0 !important;
}

.container {
  padding: 0 !important;
}

.footer {
  padding: 0 !important;
}

/* 删除或修改自定义的填充样式 */
.navbar {
  padding: 0;
}

.container {
  padding: 0;
}

.footer {
  padding: 0;
}

<div class="container">
  <nav class="navbar">导航</nav>
  <main class="content">文章</main>
  <footer class="footer">页脚</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使容器占满整个视口高度 */
}

.navbar, .footer {
  flex-shrink: 0; /* 防止导航和页脚收缩 */
}

.content {
  flex-grow: 1; /* 使内容区域占满剩余空间 */
  padding: 0; /* 删除内容区域的填充 */
}