Css 引导：在导航栏中将锚定标记与插入符号分开

我有以下代码：

%a.dropdown-toggle-nav.no-active(data-toggle='dropdown' href='')
        Accounts
        %i.icon-caret-down
      %ul.dropdown-menu(role='menu')
        ...

如下所示：

我想做的是分离出锚和插入符号功能。当我单击Accounts时，它是一个锚定标记，将我带到一个特定页面，当我单击插入符号时，它将切换停留在同一页面上的下拉元素

我尝试将它们放在两个单独的锚标签中：

      %a.dropdown-toggle-nav.no-active(href=accounts_requests_path)
        Accounts
      %a.dropdown-toggle-nav.no-active(data-toggle='dropdown' href='')
        %i.icon-caret-down
      %ul.dropdown-menu(role='menu')

但是由于bootstrap css，这会将元素放在两个单独的行上，我想将插入符号保留在文本旁边。我曾想过使用绝对定位来强制插入符号位于文本旁边，但必须有更好的解决方案

---

有什么想法吗？

你想过用户体验吗？人们怎么知道他们可以点击其中任何一个呢？我明白，这不是最好的决定，但这是我老板想要的，所以我将简单地实现它。为该li中内联块而不是块的链接创建一个类。这将使他们站在同一条线上。类似于。自定义nav.navbar li.double-trigger>a{display:inline block；}您还需要其他样式，可能需要使用！重要的是，除非你的css非常具体。当navbar nav堆叠时，请查看未统一版本的navbar nav，这样您就可以看到它是如何完成的。代码中的缩进是错误的，您目前的缩进将导致语法错误。