Bootstrap 4 - оформление свернутой навигационной панели - PullRequest
Новая
       11

Bootstrap 4 - оформление свернутой навигационной панели

0 голосов
/ 25 февраля 2019

У меня есть следующий HTML: 

<nav class="navbar navbar-expand-lg px-5 py-3 fixed-top navbar-dark">

        <div>
            <p id="navbar-brand-text">Some text</p>
            <a class="navbar-brand smooth-scroll" href="#home">Brand text</a>
        </div>             

        <button class="navbar-toggler btn-navbar-toggler-style" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" id="navbar-toggler-icon-style"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link smooth-scroll" href="#home">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 6</a>
                </li>
            </ul> 
        </div>
    </nav>


и связанный с ним стиль: 

.navbar {
    transition: all .5s ease-in-out;
}    

#navbar-brand-text {
    color: white;
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.navbar .navbar-brand {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.navbar-nav .nav-item {
    padding-left: 8px;
    padding-right: 8px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}

.navbar-dark .nav-item.active .nav-link,
.navbar-dark .nav-item:focus .nav-link,
.navbar-dark .nav-item:hover .nav-link {
    color: #4CAF50;
}

.btn-navbar-toggler-style:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* PADDING */
.navbar-collapse.show {
    padding-top: 30px;
}


Мне нужно добавить некоторые отступыТОЛЬКО когда сворачивается панель навигации (последнее правило CSS показано выше в примере кода).Вот что я получаю (похоже, что заполнение добавлено «слишком поздно»): gif

Что не так?Как мне достичь желаемого результата?Спасибо всем за помощь.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Примените пользовательский отступ к .navbar-collapse.collapsing тоже ... 

.navbar-collapse.collapsing,
.navbar-collapse.show {
    padding-top: 30px;
}

Демо: https://www.codeply.com/go/n76IchG8ak

Или, удалите пользовательский отступ и используйтеклассы адаптивного заполнения, такие как ...

<div class="collapse navbar-collapse pt-lg-0 pt-4" id="navbarSupportedContent">

0 голосов
/ 25 февраля 2019

Вы можете добавить отступ к классу свертывания вместо show. 

.navbar-collapse {
    padding-top: 30px;
}

Класс show добавляется только тогда, когда отображаются все элементы, отсюда и задержка.

...