Question

我正在使用带有引导程序的侧边栏和顶部导航栏。我想总是看到侧边栏，无论顶部导航栏的大小是多少。

边栏显示OK然而当我使屏幕变窄（桌面上的1/2屏幕）时，顶部导航栏占用2行（如果更窄则为3行或4行）并覆盖侧边栏的顶部，遮挡上边栏链接。

仅当我包含如下所示的导航栏右侧块时才会出现此问题。

HTML：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
    <!-- The problem occurs with this ul block below -->
    <ul class="nav navbar-nav navbar-right">
        ...
    </ul>

目前的css：

div.navbar {
  z-index: 999;
}
.top-nav {
    padding: 0 15px;
}
@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
}
@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background-color: white;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }
}

笔在这里（道歉，如果有点冗长）

https://codepen.io/hf7dpr/pen/ggzVpd

导航栏覆盖寡妇边栏，在codepen中调整765到840px之间的宽度。

有关如何始终查看侧边栏项目（但不会覆盖顶部导航栏）的任何想法？

Answer 1

根据导航栏高度，您可以使用javascript更改侧边栏的顶部位置。这是一个例子（为你的导航添加了jQuery，js代码和id＆＃39;所以js与样式类分开）：

https://codepen.io/themeler/pen/MJXEpE

$(function () {
  var calculateHeight = function () {
    $('#side-nav').css('top', $('#navbar').height() + 'px')
  }
  // init
  calculateHeight()
  // recalculate on window resize
  $(window).on('resize', calculateHeight)
})

导航栏下方的Twitter Bootstrap侧边栏位置不在其后面

1 个答案: