Javascript JQuery引导扩展垂直菜单重叠引导网格系统

在Rails4上实现这一点时，我遇到了网格系统的重叠问题

在第一张图片上，主页没有任何网格系统引用（例如col-sm-12），并且显示nice

第二张图片确实引用了col-xs-12，然后问题就来了

以下是css（仅大屏幕）：

这里是navbar（临时）实现：

<!-- <script>
$(document).ready(function() {
    $('a').click(function(event) {
    $('a').removeClass('selected');
    $(this).addClass('selected');
    event.preventDefault();
  })
});
</script> when active, colors work, but clicks does not. FIX --> 
<nav class="navbar navbar-vertical-left">
<ul class="nav navbar-nav">
  <li><%= link_to icon('home', 'Home', class: 'fa fa-fw fa-lg'), root_path %></li>
  <% if user_signed_in? %>
  <li><%= link_to icon('user', 'User', class: 'fa fa-fw fa-lg'), current_user %></li>
  <li><%= link_to icon('users', 'Plaza', class: 'fa fa-fw fa-lg'), root_path %></li>
  <li><%= link_to icon('wrench', 'Settings', class: 'fa fa-fw fa-lg'), root_path %></li>
  <li><%= link_to icon('sign-out', 'Sign out', class: 'fa fa-fw fa-lg'), root_path %></li>
  <% else %>
  <li><%= link_to icon('sign-in', 'Sign in', class: 'fa fa-fw fa-lg'), root_path %></li>
  <li><%= link_to icon('user-plus', 'Sign up', class: 'fa fa-fw fa-lg'), root_path %></li>
  <% end %>
</ul>

我猜有两种解决方案。一种是完全重叠，另一种是推动。但不知道是怎么回事

有什么帮助吗？谢谢。

谢谢，我意识到css包含z轴。Ui元素从最远的（0）到与查看器（3或n）关系最近的位置都有库存。注意，它也允许负数

因此，为了避免启动时出现网格问题，只需在页面的其余部分添加最后一行即可覆盖菜单：

.navbar-vertical-left {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 130px;
  overflow: hidden;
  border: none;
  border-radius: 0;
  margin: 0;
  z-index: 1;
}

---

谢谢。

您尝试过在css内部使用吗？如果有疑问，看看这个谢谢蒂姆。我不熟悉z指数。只要看看链接我就明白了。我会回答这个问题。再次感谢，太好了！我很高兴这个问题解决了！

.navbar-vertical-left {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 130px;
  overflow: hidden;
  border: none;
  border-radius: 0;
  margin: 0;
  z-index: 1;
}