如何减少Bootstrap模板的padding、margin及调整文本字体大小

一、减少模块间空白（Padding/Margin） #

Bootstrap示例模板的模块自带默认间距，直接通过自定义CSS覆盖即可：

• 在页面的<style>标签或独立样式表中添加以下代码，按需调整数值：

  /* 调整Hero模块底部间距 */
  .hero {
    margin-bottom: 1.5rem; /* 替换成你需要的数值，默认通常为3rem以上 */
    padding-bottom: 1.5rem;
  }
  /* 调整Sign-up Form模块顶部间距 */
  .sign-up-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
  

• 若找不到对应类名，按F12打开浏览器开发者工具，选中空白区域对应的元素，在Elements面板查看类名，或直接修改元素的margin/padding值实时预览，确定合适数值后写入自定义CSS。

二、缩小文本字体大小 #

通过自定义CSS覆盖Bootstrap默认字体样式：

• 全局缩小文本（按需选择）：

  body {
    font-size: 0.9rem; /* Bootstrap默认字体大小为1rem，可根据需求调整 */
  }
  

• 单独缩小Hero或Form内的文本：

  /* Hero模块内标题与正文 */
  .hero h1 {
    font-size: 2rem; /* 默认约为3.5rem，按需调整 */
  }
  .hero p {
    font-size: 0.95rem;
  }
  /* Sign-up Form模块内文本 */
  .sign-up-form label,
  .sign-up-form input,
  .sign-up-form button {
    font-size: 0.9rem;
  }
  

注意事项 #

• 自定义CSS需放在Bootstrap样式表之后加载，确保能覆盖默认样式。
• 若Bootstrap自带的间距类（如mb-2、mt-3）能满足需求，优先使用这类类名，更符合框架规范。

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