更新

Question

感谢Bootstrap 4，我们可以最终轻松地在没有黑客的情况下在导航栏中创建全宽搜索栏。

没有这样的东西

<form class="ml-3 my-auto d-inline w-100">

我们可以创建这样一个漂亮的全宽搜索栏，我们可以在这里看到：

我仍在努力的是多字导航链接。

E.g。你可以在Stackoverflow导航栏中看到链接＆＃34;问题＆＃34; （一个字）但也是＃34;开发人员工作＆＃34; （两个字）。这没什么特别的，但解决方案正在努力解决。

如果您向提供的示例添加此类多字导航链接，导航链接将断开/强制换行并且导航栏高度也会增加：

我想强制多字导航链接保持在一行并禁止换行，因此也保持导航栏高度。

任何想法如何解决这个问题？

谢谢，最好

Answer 1

您在表单上使用了类名w-100。它将表单元素的宽度设置为100%。因此，没有足够的地方，因此文本中断。

使用flex-grow-1来解决问题。它将表单的flex属性设置为1。

<form class="mx-2 my-auto d-inline flex-grow-1">

这样做，form占用导航内的所有可用空间。

您必须使用Bootstrap 4.1，因为较低版本没有该类名。

检查此pen

您可能很想使用可能解决问题的text-nowrap。但你不应该使用它，因为它只能阻止文本包装，问题仍然存在。