我在我的页面中使用了 updated Bootstrap sidebar collapse ，但这里是侧边栏＆amp;内容对于两个div都有固定的宽度，主要内容在折叠后没有占据整个宽度。
HTML：
<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div>
<main class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>
但我想要的是在侧边栏折叠后，主要内容应该占据全宽。
我检查了this以及堆栈溢出中的其他几个问题，但没找到我想要的内容
答案 0 :(得分：1)
这是需要做的事情：
首先，我将过时的col-xs替换为col。然后我将剩余的col-md-9 col-11替换为col。完成！
它工作的原因是因为侧边栏的第一列已经定义。 col然后只填写所有可用的剩余空间。
这是工作代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#sidebar .list-group-item {
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #222;
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
padding-left: 40px;
}
@media (max-width:48em) {
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
position: absolute;
z-index: 1;
width: 190px;
}
#sidebar .list-group > .list-group-item {
text-align: center;
padding: .75rem .5rem;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
display:none;
}
}
/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
#sidebar.collapsing {
opacity: 0.8;
width: 0;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
main{
background-color:green;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-1 pl-0 pr-0 collapse in" id="sidebar">
<div class="list-group panel">
<a href="#menu1" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard"></i> <span class="hidden-sm-down">Item 1</span> </a>
<div class="collapse" id="menu1">
<a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a>
<div class="collapse" id="menu1sub1">
<a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a>
<a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a>
<a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a>
<div class="collapse" id="menu1sub1sub1">
<a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a>
<a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a>
</div>
<a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a>
<a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 5 e </a>
<div class="collapse" id="menu1sub1sub2">
<a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a>
<a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a>
</div>
</div>
<a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a>
<a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a>
</div>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="hidden-sm-down">Item 2</span></a>
<a href="#menu3" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="hidden-sm-down">Item 3 </span></a>
<div class="collapse" id="menu3">
<a href="#" class="list-group-item" data-parent="#menu3">3.1</a>
<a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a>
<div class="collapse" id="menu3sub2">
<a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a>
<a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a>
<a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a>
</div>
<a href="#" class="list-group-item" data-parent="#menu3">3.3</a>
</div>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="hidden-sm-down">Item 4</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="hidden-sm-down">Item 5</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-clock-o"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-th"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-gear"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-calendar"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-bar-chart-o"></i> <span class="hidden-sm-down">Link</span></a>
<a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-star"></i> <span class="hidden-sm-down">Link</span></a>
</div>
</div>
<main class="col pl-2 pt-2">
<a href="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-lg"></i></a>
<hr>
<div class="page-header">
<h1>Bootstrap 4 Sidebar Menu</h1>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>