Question

我有以下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

怎么了？如何获得理想的结果？谢谢大家的帮助。

Answer 1

也将自定义填充应用于.navbar-collapse.collapsing ...

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

演示：Docs

或者，删除自定义填充并使用响应填充类，例如...

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

Answer 2

您可以将填充添加到折叠类中，而不要显示。

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

仅在显示所有项目时才添加show类，因此会产生延迟。

Bootstrap 4-设计折叠的导航栏

2 个答案: