Bootstrap：当我减小页面宽度时导航栏项目移动

Question

我有两个导航栏，一个在另一个上。此顶部栏较细，有两个导航项。这些项目在页面右侧对齐。我已经进行了设置，以使其在减小页面宽度时不会崩溃。但是，当我缩小页面太多时，这些项目似乎消失了，我相信它正在向其他导航栏后面移动。

我想要这样，这两个导航项在页面上只是静态的，而与页面宽度无关

css：

body {
    padding-top: 105px;
}

.navbar-top-custom {
    height: 28px;
    background-color: rgba(32, 32, 32, 1);
}

.navbar-bottom-custom {
    margin-top: 28px;
    height: 56px;
    background-color: rgba(53, 53, 53, 1);
}

.navbar-top-custom .nav-item{
    color: rgb(211, 211, 211) !important;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

html：

<nav class="navbar navbar-expand-sm navbar-top-custom fixed-top">
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-question-circle" style="padding-right: 5px"></i>  Knowledge Base</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-user-circle" style="padding-right: 5px"></i>  Client Login</a>
        </li>
    </ul>   
</nav>

全屏屏幕截图：

减少宽度屏幕截图：

编辑：

因此，当分辨率降低时，对其进行引导似乎可以虚拟地堆叠<li>。有什么方法可以阻止这种行为吗？

Answer 1

我认为这是为height设置的.navbar-top-custom的问题。尝试删除height或更改padding或<nav>的{​​{1}}。