时间戳

首页 > 解决方案 > 没有水平滚动条的溢出屏幕自定义导航栏（引导）

html - 没有水平滚动条的溢出屏幕自定义导航栏（引导）

问题描述

我的页面上有一个自定义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和的CSS navComp：

@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);
}

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

1

浏览器navbar右边距溢出，但不出现滚动条。

滚动条仅在divs文本Test在右边距溢出时出现。

标签： htmlcsstwitter-bootstrap

解决方案

最后我想通了。

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

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

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

推荐阅读