Bootstrap 4 боковой навигации

Question

Если взглянуть на документацию по Bootstrap 4, то на боковой панели явно отображается выровненная по левому краю панель, которая принимает всю высоту своего родителя в качестве основного прокрутки контента в центре.Я проверял элементы, пытаясь реконструировать его, но, как бы я ни пытался, я не могу добиться того, чтобы моя колонка была в полный рост.Любые идеи о том, как реализовать это с помощью служебных классов Bootstrap 4?

Answer 1

Похоже, они используют какой-то пользовательский CSS и не встроены в классы Bootstrap.

Если вы осмотрите элемент, то увидите, что существует класс основного контейнера с именем bd-sidebar.Глядя на правила CSS, вы найдете что-то похожее на это.

@media (min-width: 768px)
.bd-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: calc(100vh - 4rem);
}

Проводит вас через эту строку за строкой.Верхняя строка - это медиа-запрос, поэтому все это правило будет применяться только при ширине экрана 768 пикселей или выше.

position:sticky - эти парни могут объяснить это лучше меня - https://css -трюки.com / position-sticky-2 / - выше, это версия с префиксом поставщика.

top:4rem - толкает верхнюю часть на 4 'относительные значения' ,Отсюда ясно, что верхняя панель навигации.

z-index:1000 - гарантирует, что она находится выше и ниже определенного содержимого.

И вот здесь идет умный бит!

height: calc(100vh - 4 rem)

Это calc увеличивает высоту этого элемента путем удаления 4 относительных ems (вспомните высоту навигационной панели, которую мы хотели очистить ранее) из 100 vh.A vh - это высота области просмотра и процент от полной высоты области просмотра.Например, 10vh разрешит до 10% текущей высоты области просмотра (источник: https://css -tricks.com / fun-viewport-units / )