两行下拉菜单

Question

您好，我在创建带有下拉菜单的导航栏时遇到了一些麻烦，我只需要一行中的所有信息，但我的菜单名称和箭头不在同一位置。

创建了一个 CSS 元素：.dropdown-toggle::after{display: inline-block;}

我的导航栏看起来像这样：

我尝试了在 Bootstrap 网站上找到的大多数下拉/导航栏示例，但每次我的结果都显示为两行。我怎样才能解决这个问题，让我的标签和我的箭头在同一行？

Answer 1

要点：

1. 如果您需要将所有内容放在一行中，请使用white-space: nowrap; 或减小字体大小。
2. 正如您所提到的，您需要将箭头放在同一行，但这不是因为那里的空间较小，因此请使用绝对位置作为箭头。
3. 通过空白属性使其成为单行后，您需要在此处创建省略号，这样您的内容就不会显得奇怪。
4. 制作省略号：在其父项上使用overflow:hidden;，在您的文本上使用text-overflow:ellipsis