Question

所以我使用bootstrap构建一个带侧导航栏的仪表板。当导航栏打开时，容器内容将被推到屏幕右侧。我希望调整整个容器的大小以适应屏幕。因此，无论导航栏是打开还是折叠，容器都应该完全可见。是否有一个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>

Answer 1

请更改css的值。

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    width: calc(100% - 235px);
    margin-left: 235px;
}

侧导航栏打开/折叠和容器调整大小

1 个答案: