html--左侧固定宽度，右侧自适应宽度布局

左侧固定宽度，右侧自适应宽度结构

原理：

定位（position）中的absolute属性值可以使元素脱离正常文档流，后面的元素向上移动，将后面的元素设置margin-left属性值设置为前面脱离文档流的元素的宽度，就可以完全显示后面的内容。

        
class="row">
            
"position: absolute;width:180px;">
                
"accordion">
                    
class="card">
                        
class="card-header bg-secondary ">
                            
class="card-link text-white" data-toggle="collapse" href="#collapseOne">机型管理
                        
                        
"collapseOne" class="collapse show" data-parent="#accordion">
                            
class="well sidebar-nav nav-pills" style="position: relative; left: 16px">
                                
class="nav flex-column">
                                    
class="text-dark col-1" href="/About">添加机型
                                    
class="text-dark col-1" href="/Contact">更新机型
                                    
class="text-dark col-1" href="/About">机型查询
                                
                            
                        
                    
                    
class="card">
                        
class="card-header bg-secondary">
                            
class="collapsed text-white card-link" data-toggle="collapse" href="#collapseTwo">任务管理
                        
                        
"collapseTwo" class="collapse" data-parent="#accordion">
                            
class="well sidebar-nav nav-pills" style="position: relative; left: 16px">
                                
class="nav flex-column">
                                    
class="text-dark col-1" href="/About">任务登记
                                    
class="text-dark col-1" href="/Contact">任务审核
                                    
class="text-dark col-1" href="/ManageTest/ConfigTestPlan">计划制定
                                    
class="text-dark col-1" href="/About">进度更新
                                
                            
                        
                    
                    
class="card">
                        
class="card-header bg-secondary">
                            
class="collapsed text-white card-link" data-toggle="collapse" href="#collapseThree">异常管理
                        
                        
"collapseThree" class="collapse" data-parent="#accordion">
                            
class="well sidebar-nav nav-pills" style="position: relative; left: 16px">
                                
class="nav flex-column">
                                    
class="text-dark col-1" href="/Contact">异常查询
                                    
class="text-dark col-1" href="/About">异常登记
                                    
class="text-dark col-1" href="/Contact">异常审核
                                    
class="text-dark col-1" href="/About">异常更新
                                
                            
                        
                    
                    
class="card">
                        
class="card-header bg-secondary">
                            
class="collapsed text-white card-link" data-toggle="collapse" href="#collapseFour">报告管理
                        
                        
"collapseFour" class="collapse" data-parent="#accordion">
                            
class="well sidebar-nav nav-pills" style="position: relative; left: 16px">
                                
class="nav flex-column">
                                    
class="text-dark col-1" href="/Contact">报告上传
                                    
class="text-dark col-1" href="/About">报告审核
                                    
class="text-dark col-1" href="/Contact">报告查询
                                
                            
                        
                    
                
            
            
"margin-left:200px;margin-right:10px;">
右侧工作区