Question

背景：

我正在尝试根据引导程序管理面板示例创建可折叠侧边栏导航菜单... 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


            });

        });

Answer 1

如果您在nav和main元素上使用了正确的col- - 类，则无需指定内容左边的边距。它们的行为就像一个网格。

我认为你不需要补偿。

Answer 2

正如我所看到的，侧栏的位置是固定的，所以当main-content有main-content级时，它应该重叠col-*-12？所以你不能设置margin-left，而padding-left设置为.content-wider？

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

2 个答案: