Как можно избежать того, что встроенные значки переходят на следующую строку в мобильном телефоне?

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

Добавьте следующий 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;
}

Answer 2

flex-warp:wrap в классе .navbar>.container, .navbar>.container-fluid{} заставляет кнопку перейти на следующую строку ... вы можете либо удалить ее, либо уменьшить отступ, чтобы подогнать кнопки к контейнеру

CSS flex-Свойство wrap указывает, нужно ли сгибать элементы в одну строку или их можно переносить на несколько строк.Если перенос разрешен, это свойство также позволяет вам контролировать направление, в котором линии укладываются.