JQuery-Bootstrap-Expanding-Vertical-Menu重叠Bootstrap网格系统

Question

在Rails 4上实现此expanding left menu时，我遇到了网格系统的重叠问题。

在第一张图片上，主页没有任何网格系统报价（例如col-sm-12）并且显示效果很好。

第二张图片确实有col-xs-12引用然后出现问题。

这是css（只有大屏幕）：

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

.navbar-vertical-left ul.navbar-nav {
  width: 100%;
  height: auto;
  display: table;
  margin: 0;
}

.navbar-vertical-left ul.navbar-nav:before,
.navbar-vertical-left ul.navbar-nav:after {
  display: none;
}


.navbar-vertical-left ul.navbar-nav > li {
  display: table-row;
  float: none;
}

.navbar-vertical-left ul.navbar-nav > li > a {
  display: table-cell;
  vertical-align: middle;
}

.navbar-vertical-left ul.navbar-nav > li > a > i.fa {
  margin-right: 20px;
}

/* Colors */

.navbar-vertical-left {
  background: $green-medium;
  color: $white-letters;
}

.navbar-vertical-left ul.navbar-nav > li > a {
  color: $white-letters;
}

.navbar-vertical-left ul.navbar-nav > li > a:hover,
.navbar-vertical-left ul.navbar-nav > li > a:active {
  background: $green-light;
}

.navbar-vertical-left ul.navbar-nav > li > a.selected {
  background: $green-light;
}

/* Animation */

.navbar-vertical-left {
  -webkit-transition: -webkit-transform .3s;
     -moz-transition:    -moz-transform .3s;
          transition:         transform .3s;

  -webkit-transform: translateX(-100px);
     -moz-transform: translateX(-100px);
          transform: translateX(-100px);
}
.navbar-vertical-left:hover {
  -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
          transform: translateX(0px);
}

.navbar-vertical-left ul.navbar-nav {
  -webkit-transition: -webkit-transform .3s;
     -moz-transition:    -moz-transform .3s;
          transition:         transform .3s;

  -webkit-transform: translateX(100px);
     -moz-transform: translateX(100px);
          transform: translateX(100px);
}

.navbar-vertical-left:hover ul.navbar-nav {
  -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
          transform: translateX(0px);
}

这里是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>

我猜可以有2个解决方案。一个是完全重叠，另一个是推动。但不知道如何

有任何帮助吗？感谢。

Answer 1

感谢Tim Kos我意识到css包含z轴。 Ui元素是从最远（0）到最接近观察者（3或n）的库存。请注意，它也承认负数......

因此，为了避免使用Bootstrap导致网格问题，只需在此片段中添加最后一行，将菜单覆盖在页面的其余部分：

.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;
}

感谢。