Боковая навигационная панель Открыть / Свернуть и изменить размер контейнера

Поэтому я использую bootstrap для создания панели с боковой панелью навигации. Когда панель навигации открыта, содержимое контейнера перемещается вправо и за пределы экрана. Я хочу, чтобы весь контейнер был изменен по размеру экрана. Таким образом, независимо от того, открыта ли панель навигации или свернута, контейнер должен быть полностью виден. Есть ли класс начальной загрузки 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>
Источник

1 ответ

Решение

Пожалуйста, измените значение CSS.

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    width: calc(100% - 235px);
    margin-left: 235px;
}
Источник
Другие вопросы по тегам