Navbar - 当 nav-item 是 2 个单词时，第二个单词在下面

Question

我试图使用引导程序完成导航栏，当我指定 nav.item 名称时，在本例中为“我们的公司”，即第二个词，即公司位于下方。 知道为什么以及如何解决它：

 <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img class ="mylogo" src="images/logo+text.png" alt="My logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#footer">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#pricing">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#cta">Contact</a> </li> </ul> </div> </nav>

Answer 1

所以我不能写评论，但介意与此分享 css 吗？ 这里可能有几种可能性

1. 自动换行可以设置为断字
2. 导航项中没有足够的空间。 就像它的严格宽度（即：.nav-link {width: 300px}）应该设置为宽度：自动；
3. .navbar-nav 也可以设置不允许导航项增长的宽度。

我可能会研究 flex-box，因为它的名字暗示它很灵活，而且我在导航区域中使用过无数次。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/是一个很好的指南和视觉效果！

如果可以，请编辑您的问题并添加一些 css，这样我真的可以在这里为您提供帮助！ 谢谢！

Answer 2

尝试使用 &nbsp在导航栏列表项中插入 HTML 空格之间的空格