html - 没有水平滚动条的溢出屏幕自定义导航栏( Bootstrap )

Question

我的页面上有一个自定义的 navbar(bootstrap)。

<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 溢出在浏览器的右边缘，但没有出现滚动条。

滚动条仅在 div with text Test overflow on the right margin 时出现。

Answer 1

我终于明白了。

Bootstrap 的

.fixed-top 有 position: fixed 这就是我的元素没有触发滚动条的原因。

我通过将 position: sticky !important; 添加到我的 .navCustom 中来修复它

这让我稍微改变了我的 css 和结构，但至少我得到了我想要的。