使用溢出

Question

我正在使用我在bootstrap中创建的侧边栏，但我无法弄清楚如何将所选项目向右移动，并使其流过nav div。我尝试增加z-index。

也许我应该使用flexbox。然后我可以在菜单项的前面和旁边添加一个单元格。然后当选择项目时，我可以在第一个单元格上设置宽度，在最后一个单元格上设置宽度0。其他（未选定的）项目可以在最后一个单元格上具有宽度。这样我想我可以在视觉上创造同样的东西。

无论如何，建议非常受欢迎。

HTML：

<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar vdl-sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item" ng-reflect-klass="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 11
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item selected">
      <a class="nav-link d-flex justify-content-between align-items-center">
        Item 13
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 14
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
  </ul>
</nav>

CSS：

/*
     * Sidebar
     */

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    /* Scrollable contents if viewport is shorter than content. */
    border-right: 1px solid #eee;
}

/* Sidebar navigation */

.sidebar {
    padding-left: 0;
    padding-right: 0;
}

.sidebar .nav {
    margin-bottom: 20px;
}

.sidebar .nav-item {
    width: 100%;
    background-color: #f9f9f9;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

@media (pointer: fine) {
    nav.vdl-sidebar a.nav-link:hover {
        background-color: lightgreen;
    }
}

.sidebar .nav-item+.nav-item {
    margin-left: 0;
}

.sidebar .nav-item+.nav-item.selected {
    margin-left: 20px;
    z-index: 2000;
}

.sidebar .nav-link {
    border-radius: 0;
}

nav.vdl-sidebar a.nav-link.active {
    background-color: green;
}

nav.vdl-sidebar a.nav-link:not(.active) {
    color: green;
}

.badge-pill {
    padding-bottom: 0.5em;
}

a {
    cursor: pointer;
}

.selected {
    margin-left: 1.5em;
    background-color: lightgreen;
}

截图：

这是我的小提琴： https://jsfiddle.net/09ogyde4/

Answer 1

您可以在overflow-x: visible;元素上使用overflow-y: visible;和.sidebar，或者只删除这一行。