Блог

просто обратите внимание в начале, что я НЕ являюсь разработчиком интерфейса, а только бэкендом.

У меня есть такой макет: https://codeply.com/v/nZU6s0EkvE

Прежде всего, я не уверен, должен ли я сделать это таким образом или, может быть, использовать сетку. Мне просто нужно было боковое меню и содержимое, чтобы получить 100% высоту. И flex был единственным вариантом, который работал без отображения полос прокрутки

Теперь, когда я уменьшаю размер экрана, возникают две проблемы:

• контент больше не занимает 100%
• боковое меню выходит наверх — на самом деле это не проблема, почему-то я этого хотел.

Теперь вопрос — как я могу решить первую проблему? И второй вопрос — что я должен сделать, чтобы показать меню гамбургеров на телефонах вместо этого бокового меню (вверх)?

Для ваших проблем с гибким интерфейсом:
вы вообще не включаете поведение гибкого интерфейса до небольшой точки останова с .d-sm-flex помощью .
Используйте .d-flex , чтобы включить для всех точек останова.
Вы хотите изменить направление сгиба в небольшой точке останова (начните со столбца и перейдите к строке).

             <div class="d-flex flex-column flex-sm-row h-100">
                <div class="bg-gray p-2">
                    Menu
                </div>
                <div class="flex-grow-1 bg-blue p-2">
                    Treść
                </div>
            </div>
 

Что касается использования кнопки «гамбургер» (технически это отдельный вопрос), ознакомьтесь с .navbar отзывчивым поведением и использованием .navbar-toggler внешнего контента. Если у вас возникнут проблемы с реализацией этого, вернитесь и отправьте новый вопрос.

Ладно, я смог это выяснить благодаря Арли Хикс.

 <div class="container-fluid p-0 h-100 bg-red">
    <div class="d-flex flex-column h-100">
        <nav class="bg-gray p-1">
            <ul class="nav">
                <li>Menu 1</li>
                <li>Menu 2</li>
            </ul>
        </nav>

        <div class="main flex-grow-1 bg-purple">
            <div class="d-flex flex-md-row flex-column h-100">
                <nav class="d-flex navbar-expand-md navbar-light bg-gray">
                    <div class="">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </div>
                    </div>
                </nav>
                <div class="flex-grow-1 bg-blue p-2">
                    Content
                </div>
            </div>
        </div>
    </div>


</div>
 

Обратите внимание, что эта вертикальная панель навигации не имеет класса .navbar. Это потому, что .класс navbar делает содержимое navbar вертикально центрированным. Так что, насколько я думаю, нужен только .d-flex (также присутствует в классе .navbar).