如何在Bootstrap中更改单词间距？

66bbxpm5 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(139)

我尝试创建一个类并将其分配给ul标记，但它仍然不起作用。

.spacing {
  word-spacing: 100px;
}

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

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled 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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76971407/how-do-i-change-word-spacing-in-bootstrap

1条答案

按热度按时间

zynd9foi1#

你没有用空格。您正在间隔 * 元素 *（列表项）。
如果我理解正确的话，您应该将默认的导航栏对齐方式between覆盖为start（左），然后添加自定义边距。不过，正如您在这个演示中看到的，这不是一个响应式布局。它不适合较小的屏幕。

.spacing-100 li {
  margin-right: 100px;
}

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

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled justify-content-start spacing-100">
    <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>

或者，在导航栏上设置一个最大宽度，以接近您所追求的间距，但在较小的屏幕上保持响应性。（如果你想避免自定义CSS，你也可以用列大小调整类来做。）如果你的目标是保持导航栏左对齐，用覆盖（ms-0）删除容器上的自动左边距。

.max-width-600 {
  max-width: 600px;
}

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

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled max-width-600 ms-0">
    <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>

赞(0）回复(0）举报 2023-09-28

我来回答

如何在Bootstrap中更改单词间距？

1条答案

相关问题

热门标签

最新问答