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

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

原理：

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

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