如何在Bootstrap中修改单词间距？自定义类绑定ul后无效

你给ul绑定的.spacing类里用word-spacing: 100px不生效，是因为word-spacing属性仅作用于文本内容中的单词间距，而ul的直接子元素是li（默认是块级元素），这个属性无法控制块级子元素之间的布局间距。

解决方案 #

方案1：使用Flex布局（推荐，适配Bootstrap生态） #

利用Bootstrap的d-flex类将ul设置为弹性容器，然后用gap属性控制子元素间距：

.spacing {
  gap: 100px;
}

修改后的HTML：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled d-flex spacing">
    <li class="nav-item"><a href="index.html" class="text-decoration-none">Home</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Blogs</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">About</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Contact</a></li>
  </ul>
</nav>

方案2：调整li显示模式适配word-spacing #

将li设置为行内块元素，让word-spacing能作用于它们：

.spacing {
  word-spacing: 100px;
}
.spacing li {
  display: inline-block;
}

HTML保持你原来的结构即可。

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