Bootstrap 4.0.0侧栏：打开时如何避免垂直扩展？

Question

我正在使用bootstrap 4.0.0创建补充工具栏，以获取我网站的垂直菜单。

这是实际代码：

$(document).ready(function() {
  $('button').click(function() {
    $('.sidebar').toggleClass('fliph');
  });
});

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

a {
  background-color: transparent;
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0px;
  padding: 0px;
}


/***********************  TOP Bar ********************/

.sidebar {
  width: 220px;
  background-color: #000;
  transition: all 0.5s ease-in-out;
}

.bg-defoult {
  background-color: #222;
}

.sidebar ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.sidebar li a,
.sidebar li a.collapsed.active {
  display: block;
  padding: 8px 12px;
  color: #fff;
  border-left: 0px solid #dedede;
  text-decoration: none
}

.sidebar li a.active {
  background-color: #000;
  border-left: 5px solid #dedede;
  transition: all 0.5s ease-in-out
}

.sidebar li a:hover {
  background-color: #000 !important;
}

.sidebar li a i {
  padding-right: 5px;
}

.sidebar ul li .sub-menu li a {
  position: relative
}

.sidebar ul li .sub-menu li a:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 0px;
  padding-right: 10px;
  vertical-align: middle;
}

.sidebar ul li .sub-menu li a:hover:after {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 5px;
  background-color: #111;
  height: 100%;
}

.sidebar ul li .sub-menu li a:hover {
  background-color: #222;
  padding-left: 20px;
  transition: all 0.5s ease-in-out
}

.sub-menu {
  border-left: 5px solid #dedede;
}

.sidebar li a .nav-label,
.sidebar li a .nav-label+span {
  transition: all 0.5s ease-in-out
}

.sidebar.fliph li a .nav-label,
.sidebar.fliph li a .nav-label+span {
  display: none;
  transition: all 0.5s ease-in-out
}

.sidebar.fliph {
  width: 42px;
  transition: all 0.5s ease-in-out;
}

.sidebar.fliph li {
  position: relative
}

.sidebar.fliph .sub-menu {
  position: absolute;
  left: 39px;
  top: 0;
  background-color: #222;
  width: 150px;
  z-index: 100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button> <i class="fa fa fa-th-large" >-india-7615949353 </i></button>

<div class="sidebar left ">
  <ul class="list-sidebar bg-defoult">
    <li>
      <a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active"> <i class="fa fa-th-large"></i> <span class="nav-label"> Dashboards </span> <span class="fa fa-chevron-left pull-right"></span> </a>
      <ul class="sub-menu collapse" id="dashboard">
        <li class="active"><a href="#">CSS3 Animation</a></li>
        <li><a href="#">General</a></li>
        <li><a href="#">Buttons</a></li>
        <li><a href="#">Tabs & Accordions</a></li>
        <li><a href="#">Typography</a></li>
        <li><a href="#">FontAwesome</a></li>
        <li><a href="#">Slider</a></li>
        <li><a href="#">Panels</a></li>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Bootstrap Model</a></li>
      </ul>
    </li>
    <li> <a href="#"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span></a> </li>
    <li>
      <a href="#" data-toggle="collapse" data-target="#products" class="collapsed active"> <i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span> <span class="fa fa-chevron-left pull-right"></span> </a>
      <ul class="sub-menu collapse" id="products">
        <li class="active"><a href="#">CSS3 Animation</a></li>
        <li><a href="#">General</a></li>
        <li><a href="#">Buttons</a></li>
        <li><a href="#">Tabs & Accordions</a></li>
        <li><a href="#">Typography</a></li>
        <li><a href="#">FontAwesome</a></li>
        <li><a href="#">Slider</a></li>
        <li><a href="#">Panels</a></li>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Bootstrap Model</a></li>
      </ul>
    </li>
    <li> <a href="#"><i class="fa fa-laptop"></i> <span class="nav-label">Grid options</span></a> </li>
    <li> <a href="#" data-toggle="collapse" data-target="#tables" class="collapsed active"><i class="fa fa-table"></i> <span class="nav-label">Tables</span><span class="fa fa-chevron-left pull-right"></span></a>
      <ul class="sub-menu collapse" id="tables">
        <li><a href=""> Static Tables</a></li>
        <li><a href=""> Data Tables</a></li>
        <li><a href=""> Foo Tables</a></li>
        <li><a href=""> jqGrid</a></li>
      </ul>
    </li>
    <li> <a href="#" data-toggle="collapse" data-target="#e-commerce" class="collapsed active"><i class="fa fa-shopping-cart"></i> <span class="nav-label">E-commerce</span><span class="fa fa-chevron-left pull-right"></span></a>
      <ul class="sub-menu collapse" id="e-commerce">
        <li><a href=""> Products grid</a></li>
        <li><a href=""> Products list</a></li>
        <li><a href="">Product edit</a></li>
        <li><a href=""> Product detail</a></li>
        <li><a href="">Cart</a></li>
        <li><a href=""> Orders</a></li>
        <li><a href=""> Credit Card form</a> </li>
      </ul>
    </li>
    <li> <a href=""><i class="fa fa-pie-chart"></i> <span class="nav-label">Metrics</span> </a></li>
    <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span></a> </li>
    <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span></a> </li>
    <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span></a> </li>
    <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span></a> </li>
    <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span></a> </li>
  </ul>
</div>

它工作得很好，我面临的唯一问题是当我点击侧边栏顶部的切换按钮时，侧边栏垂直延伸。据我所知，它与在每个列表项上显示标题所需的空间有关。是否可以通过将每个列表项保持在一个“行”上来限制此行为？