Html 我怎样才能避免在移动设备中在线图标跳到下一行？

如何避免图标跳到下一行

在桌面上，图标是直列的，但在移动设备上，我无法使图标水平放置在屏幕上

这是导航栏的代码：

<nav class="navbar fixed-bottom navbar-light bg-company-dark nav2" style="margin-top: 5px;">
    <div class="d-flex container justify-content-end">
        <button class="iconButton" onclick="window.location.href='/';"><i class="fas fa-chevron-left"></i></button>
        <button id="translateFromApps" class="iconButton">
            <i class="fas fa-language"></i>
        </button>
        <button id="deleteApp" class="iconButton"><i class="fas fa-trash"></i></button>
        <button id="toggleApp" class="iconButton"><i class="fas fa-minus"></i></button>
        <a class="iconButton" href="apps/createApp"><i class="fas fa-plus"></i></a>
        <button id="editApp" class="iconButton"><i class="far fa-edit"></i></button>
    </div>
</nav>

---

感谢所有帮助

类

.navbar>.container.navbar>.container流体{}

中的

flex warp:wrap

使按钮跳到下一行…您可以将其移除或减少填充以适合容器中的按钮

---

CSS flex wrap属性指定是将flex项强制放在一行中，还是可以放在多行中。如果允许换行，此属性还允许您控制行的堆叠方向。

添加以下css，您就完成了

.navbar>.container>* {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    align-items: center;
    height: 35px;
}
.d-flex.container.justify-content-end>*>* {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

---

你还有别的css吗？？添加flex wrap避免了跳到下一行，然后通过一些填充和边距，我可以将其居中。非常感谢。