溢出屏幕自定义导航栏（引导程序），没有水平滚动条

Question

我的页面上有一个自定义的navbar（引导程序）。

<nav class='navbar fixed-top navCustom '>

    <div class='navComp'>

        <input class='dateStyle' id='dateChart' type='date' value='" . $now . "'/>

        <button id='refreshBtn' class='refreshStyle' type='button' name='refresh'>Refresh</button>

        <form style='display:inline' method='post' action=''>
            <button id='logout' class='logoutStyle' type='submit' name='logout'>Log Out</button>
        </form>

    </div>

</nav>

这是navCustom和navComp的CSS：

@media (min-width:600px) {

    .navCustom{
        justify-content: center !important;
    }

}

.navCustom{
    margin-top: -1px;
    height: 33px;
    white-space: nowrap;
}

.navComp{
    position: absolute;
    text-align: center;
    border-style: solid;
    border-color: #dadada;
    border-width: 1px;
    border-radius: 3px;
    background-color: #fafafa;
    padding-left:5px;
    padding-right:5px;
    box-shadow:0 0px 2px rgba(0, 0, 0, 0.1);
}

我的问题是浏览器的尺寸很小。

浏览器右边缘的navbar溢出，但没有出现滚动条。

仅当divs的文字Test在右边距溢出时，滚动条才会出现。

Answer 1

最后我想通了。

Bootstrap中的

.fixed-top具有position: fixed，这就是为什么滚动条未由我的元素触发的原因。

我通过将position: sticky !important;添加到我的.navCustom

中来修复它

这使我改变了CSS和结构，但至少我已经获得了想要的东西。