Html 使用Bootstrap 4在手机上定位导航栏图标？

我试图在Bootstrap4中配置一个导航栏，以便在汉堡包菜单左侧显示仅在手机上显示的其他图标

我无法让图标在线显示，也无法找出哪里出了问题

我将类navbar nav添加到列表中，d-lg-none隐藏在更大的设备上。引导中是否有内置类可以修复这些类的对齐？我甚至不知道自己哪里出了问题

HTML:

---

根据您的布局，您可以使用bootstrap flex实用程序类轻松解决这个问题

只需将

d-flex

和

flex行

类添加到包含以下项目的

ul

：

<ul class="navbar-nav d-lg-none ml-auto navbar-icons d-flex flex-row">

这会将

ul

s显示更改为flex，并强制flex方向为row样式，因此项目将并排显示

---

这是一本很好的学习指南。尝试理解基础知识，并将其与引导flex类一起使用。

您是否尝试将

d-flex

和

flex行

类添加到包含图标列表项的ul中？谢谢您的帮助，flexbox上的文章很有帮助。从BS3过渡到BS4，这是一个学习曲线！

.navbar-icons .nav-item{
  border-bottom:none;
  padding:0 5px;
  position:relative;
 }

<ul class="navbar-nav d-lg-none ml-auto navbar-icons d-flex flex-row">