使用没有大写字母的Bootstrap导航栏

Question

我正在使用相当多的Bootstrap导航栏，默认情况下所有文本都以大写字母显示。如何覆盖此默认样式？

Answer 1

将此样式放在您自己的样式表示例中的导航列表中：

.Nav {text-transform: capitalize;}

您可能需要在分号前添加!important。

希望这有帮助。

Answer 2

要摆脱自动大写Bootstrap链接中的首字母，我使用text-transform: initial而不是text-transform: capitalize;：

<style>
  .initial a {
    text-transform: initial;
  }
</style>

<nav class='navbar navbar-expand-sm initial'>
  <ul class='navbar-nav'>
    <li class='nav-item'>
      <a class='nav-link' href='#'>Link name</a>
    </li>
  </ul>
</nav>