在向引导程序列添加较小的左边距时防止y溢出

背景：

我正在尝试根据引导管理面板示例创建可折叠的侧边栏导航菜单... https://v4-alpha.getbootstrap.com/examples/dashboard/

问题：

当管理栏处于折叠模式时，将显示一个小的图标栏。我添加margin-left: 50px了主要内容，以便左侧栏有空间，但是随后它将我的主要内容推到屏幕的右侧。

这是我的问题的屏幕截图：

到目前为止，我有：

我的标记

<!-- top navigation -->
        <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
            <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Dashboard</a>

            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Teach
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Config
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Help</a>
                    </li>
                </ul>
                <form class="form-inline mt-2 mt-md-0">
                    <input class="form-control mr-sm-2" placeholder="Search" type="text">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <!-- end top navigation -->

        <div class="container-fluid">
            <div class="row">

                <!-- sidebar navigation -->
                <nav id="sidebar" class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">

                    <div class="sidebar-header">
                        <a id="toggleSidebar" href="#">
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </a>
                    </div>

                    <div class="sidebar-section">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <span><i class="fa fa-tachometer" aria-hidden="true"></i></span>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-shopping-basket" aria-hidden="true"></i></span>
                                <span>Bookings</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-credit-card" aria-hidden="true"></i></span>
                                <span>Payments</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-database" aria-hidden="true"></i></span>
                                <span>Classes</span>
                            </a>
                        </li>
                    </div>

                    <div class="sidebar-section">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-certificate" aria-hidden="true"></i></span>
                                <span>Courses</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-book" aria-hidden="true"></i></span>
                                <span>Curriculum</span>
                            </a>
                        </li>
                    </div>

                    <div class="sidebar-section">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-users" aria-hidden="true"></i></span>
                                <span>Groups</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-user" aria-hidden="true"></i></span>
                                <span>Students</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
                                <span>Teachers</span>
                            </a>
                        </li>
                    </div>

                    <div class="sidebar-section">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span><i class="fa fa-tachometer" aria-hidden="true"></i></span>
                                <span>Marketing</span>
                            </a>
                        </li>
                    </div>

                </nav>
                <!-- end sidebar navigation -->

                <!-- main content -->
                <main id="mainContent" class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
                    <h1>Dashboard</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </main>
                <!-- end main content -->

            </div>
        </div>

我的CSS

/*bootstrap style*/
body {
    padding-top: 50px;
}

.sidebar {
    border-right: 1px solid #444444;
    background: #353C3E;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0px;
    padding-left: 0px;
    position: fixed;
    top: 51px;
    z-index: 1000;
}

/*sidebar button*/
#toggleSidebar {
    display: block;
    padding: 10px;
}

#toggleSidebar i {
    color: white;
}

.sidebar-header {

}

.sidebar-header a {
    text-align: right;
}

.sidebar-section {
    padding-bottom: 30px;
    border-top: 1px solid #444444;
    list-style: outside none none;
}

.sidebar-section .nav-item {
    border-bottom: 1px solid #444444;
}

.sidebar-section i {
    color: #aaaaaa;
    margin-right: 20px;
}

.sidebar-section a {
    color: #ffffff;
    background: #292b2c;
}

.sidebar-section a:hover {
    color: #ffffff;
    background: #777777;
}

.sidebar .active {
    background: #999999;
    border-left: 10px solid #ffffff;
}

.sidebar .active i {
    color: white;
}

/*when collapsed*/
.sidebar-smaller {
    overflow-y: hidden;
}

.sidebar-smaller div li a span:nth-child(2) {
    display: none;
}

.sidebar-smaller i {
    color: #aaaaaa;
    margin-right: 0px;
    text-align: center !important;
}

.sidebar-smaller .sidebar-header a {
    text-align: center;
}

.sidebar-smaller .active {
    color: #aaaaaa;
    border-left: none;
}

.content-wider {
    margin-left:54px;
}

我的jQuery切换代码

$(function(){

            // cache the dom
            $sidebar       = $('#sidebar');
            $toggleSidebar = $('#toggleSidebar');
            $mainContent   = $('#mainContent');
            toggled        = false;

            $toggleSidebar.click(function(){

                if (toggled === false) {

                    // shrink the sidebar
                    $sidebar.addClass('sidebar-smaller');
                    $sidebar.removeClass('col-sm-3 col-md-2');

                    $mainContent.addClass('content-wider col-12');
                    $mainContent.removeClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2');

                    toggled = true;

                } else {

                    // expand the sidebar
                    $sidebar.addClass('col-sm-3 col-md-2');
                    $sidebar.removeClass('sidebar-smaller');

                    $mainContent.addClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2');
                    $mainContent.removeClass('content-wider col-12');

                    toggled = false;

                }


                // remove the class col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3

                // add the class col-sm-12 col-md-12 pt-3


            });

        });