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

【问题标题】：Prevent y-overflow when adding small left margin to bootstrap columns向引导列添加小的左边距时防止 y 溢出
【发布时间】：2017-07-08 08:57:21
【问题描述】：

背景：

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


            });

        });

【问题讨论】：

发布您的代码很棒。但是，当您使用它来创建问题的minimal reproducible example 时，它会更有帮助。您可以确保加载了所有必需的资产，问题是可重现的，并且您还可以指示出现问题的屏幕尺寸。它有很大帮助并加快了流程，并大大增加了您获得高质量、有效答案的机会。
嗨，Adrei，这是小提琴：jsfiddle.net/kd1pr63v
如我所见，侧边栏的位置是固定的，所以当主内容具有类 col-*12 时，它应该与主内容重叠？所以你可以不设置margin-left，而是将padding-left设置为.content-wider？
@ Banzay，这确实有效！谢谢！
我把它作为答案

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

正如我所见，侧栏的位置是固定的，所以当main-content 具有类col-*-12 时，它应该与main-content 重叠？所以你可以不设置margin-left，而是将padding-left设置为.content-wider？

【讨论】：

【解决方案2】：

如果您在导航和主要元素上使用正确的 col-- 类，则无需指定内容的边距。它们的行为与网格完全一样。

我认为您也不需要偏移量。

【讨论】：

感谢您的回复！您的意思是在导航中添加 col-1 并在主要内容中添加 col-11 吗？在这种情况下，我更喜欢 50px 的固定宽度侧边栏，以便它适合我为什么要指定边距的图标...
如果是这种情况，你最好只使用浮动而忽略使用 col 类。这是一个例子stackoverflow.com/a/16964252
@PedroCosta 您的回答是正确的，但它可以使用更多信息：为什么使用 Bootstrap 的row>col 进行侧边栏导航是一种糟糕的用户体验实践，哪些是常见的替代方案。你是要扩展你的答案还是更喜欢我添加一个更详细的答案？
@AndreiGheorghiu 我目前正在使用移动设备，我会尽快扩展我的答案。感谢您的提醒。
为这个考虑不周的问题道歉，网上已经有大量的信息了。欣赏答案。