如何避免行内图标跳到移动设备的下一行？

Question

如何避免图标跳到下一行？

在桌面上，图标是嵌入式的，但在移动设备上，我不能使图标水平地适合屏幕。

这是导航栏的代码：

<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>

感谢您的帮助

Answer 1

flex-warp:wrap类中的.navbar>.container, .navbar>.container-fluid{}使按钮跳到下一行...您可以删除按钮或减少填充以使按钮适合容器中的

CSS flex-wrap属性指定将flex项目强制插入单行还是可以包装到多行。如果允许换行，此属性还使您可以控制线的堆叠方向。

Answer 2

添加以下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;
}