Bootstrap如何修改Navbar导航条品牌文字的字体间距

letter-spacing 应作用于纯文本容器（如 h1、p），避免用于 input、btn 等交互组件；单位必须用 em，优先采用 0.04em（正文）、0.08em（标题）；通过外部 CSS 文件在 Bootstrap 后加载并用具体选择器覆盖，配合媒体查询实现响应式控制。

直接加 letter-spacing 就生效，但别往 .form-control 或 .btn 上硬套

Bootstrap 没封禁 letter-spacing，你写它就起作用，前提是目标元素是纯文本容器。问题常出在误用场景：比如给 <input class="form-control"> 直接设 letter-spacing: 0.1em，结果光标偏移、选区虚线错位——Safari 和旧版 Chrome 尤其明显；.btn 加了大间距后文字撑出按钮边界，又不换行。

1. 优先作用于 <h1 class="text-center">、<p class="lead">、<div class="card-title"> 这类纯文本容器
2. 避开 .form-control、.btn、.badge 等交互组件的 class 直接设置
3. 若真要调输入框内文字间距，改用 font-feature-settings: "kern" + 固定 font-size 和 line-height 更稳

letter-spacing 单位必须用 em，别用 px

Bootstrap 的响应式字体（如 h1 { font-size: calc(1.375rem + 1.5vw) }）会让 px 单位的字间距失配：小屏时 1px 太重，大屏时又不够。而 em 是相对于当前字号的，能随缩放自动调整。

1. 正文统一推荐 letter-spacing: 0.04em
2. 标题可用 0.08em，品牌名若字号固定（如 24px）才考虑用 1px
3. 英文主导区域（如 .navbar-nav .nav-link）单独设更小值：letter-spacing: 0.02em
4. 禁用负值对 <small> 或 .text-muted 类——12px 下 -0.02em 已接近视觉粘连临界点

覆盖 Bootstrap 样式，别改源码，也别用内联 style

Bootstrap 最新 CSS 文件里几乎没定义 letter-spacing（除个别 demo 类），所以你自定义的规则只要加载顺序在它之后，就能干净覆盖。硬塞内联 style="letter-spacing: 0.05em" 会破坏可维护性，且无法响应断点变化。

1. 建独立 CSS 文件（如 custom-navbar.css），放在 Bootstrap CSS 引用之后
2. 用具体选择器提升权重，例如：.navbar-brand { letter-spacing: 0.06em; }
3. 需要响应式控制？用媒体查询：@media (max-width: 991.98px) { .navbar-brand { letter-spacing: 0.04em; } }

中英文混排时，别忽略 .navbar-brand 内部图片对齐问题

.navbar-brand 若含 <img> + 文字，图片 baseline 默认对齐会导致视觉下沉，“左边空、右边挤”。这不是字间距问题，但容易被误判为间距异常。

1. 给图片加 align-middle 类，或写 vertical-align: middle
2. 图标尺寸和文字字号差异大时，用 height: 1.5rem; object-fit: contain; 控制缩放
3. .navbar-brand 默认有 padding: 0.5rem 1rem，若只想要图标无边距，得显式覆盖：px-0 py-0

真正要调的是纯文本的呼吸感，不是强行拉扯像素。字间距太小，英文单词糊成一片；太大，中文阅读断气。关键在 em 单位 + 容器隔离 + 加载顺序——漏掉任何一环，都可能在某个断点或某台设备上突然失效。