1
サイドストラップを使用してダッシュボードを構築するためにブートストラップを使用しています。ナビゲーションバーが開いていると、コンテナの内容が画面の右側と外側にプッシュされます。コンテナ全体を画面に合わせてサイズ変更したい。したがって、ナビゲーションバーが開いているか折り畳まれているかに関係なく、コンテナは完全に表示されている必要がありますその問題を修正するためにボディやコンテナに追加できるブートストラップのCSSクラスはありますか？サイドナビゲーションバーオープン/折りたたみコンテナサイズ変更
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#"><img src="assets/img/logo.png"></img></a>
</li>
<li>
<a href="overview.html"><span class="icon icon-home"></span>Overview</a>
</li>
<li>
<a href="#"> <span class="icon icon-suitcase"></span>Account Management</a>
</li>
<li>
<a href="#"><span class="icon icon-bar-graph"></span>Demand Planning</a>
</li>
<li>
<a href="#"><span class="icon icon-box"></span>Inventory Planning</a>
</li>
<li>
<a href="#"><span class="icon icon-light-bulb"></span>Vendor Management Invetory</a>
</li>
<li>
<a href="dashboards.html"><span class="icon icon-calculator"></span>Dashboards</a>
</li>
<li>
<a href="#"><span class="icon icon-text-document">Reports</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="dashhead">
<div class="dashhead-titles">
<div class="dashhead-toolbar">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div>
<h3 class="dashhead-title">Overview</h3>
</div>
</div>
<ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist">
<li class="nav-item" role="presentation">
<a href="#traffic" class="nav-link active" role="tab" data-toggle="tab" aria-controls="traffic">Summary</a>
</li>
</ul>
<hr class="mt-0 mb-5">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="traffic">
<div class="row text-center m-t-md">
<div class="col-lg-4"</div>
</div>
</div>
</div>
<style>
#sidebar-wrapper {
z-index: 1000;
left: 235px;
width: 0;
height: 100%;
margin-left: -235px;
overflow-y: auto;
overflow-x: hidden;
background: #252D3A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
#wrapper.toggled #sidebar-wrapper {
width: 235px;}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -235px;}
#page-content-wrapper {
width: 100%;
padding-top: 20px;}
#sidebar-nav {
position: absolute;
top: 0;
width: 235px;
margin: 0;
padding: 0;
list-style: none;}
</style>