内容不随滑动侧菜单移动

Question

我创建了一个滑动侧面菜单，可以通过css滑入和滑出。 但是，我的问题是，即使侧面菜单滑出视图，右侧的内容也不会跟随它。 这是一个angularjs + bootstrap3应用程序。

下面是我想要的效果示例： http ： //wrapbootstrap.com/preview/WB07H3237

当您单击其上有三条水平线的按钮时，它会将菜单切换到侧面并随之移动内容（向左）。

style.css文件

.sidebart {
    -moz-transition: left .1s;
    -webkit-transition: left .1s;
    -o-transition: left .1s;
    transition: left .1s;
    width: 210px;
    height:100%;
    background-color:#2a3542;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

.slide-outt {
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
    left: -210px;

}

partial.html

    <div ng-controller="myCtrl">

<button class="btn btn-default collapse-button" ng-click="click()">Toggle collapse</button>
 <div id="sidebar" class="sidebart" ng-class="{'slide-outt':boolChangeClass}">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
                                  <a href="#/customer">
                                      <i class="fa fa-user"></i>
                                      <span>Customers</span>
                                  </a>
                              </li>
           <li>
                                  <a href="#/order">
                                      <i class="fa fa-tasks"></i>
                                      <span>Orders</span>
                                  </a>
                              </li
            </div>

controller.js

function myCtrl($scope) {
    $scope.click = function() {
        $scope.boolChangeClass = !$scope.boolChangeClass;
        //$scope.$apply();
    };
}

Answer 1

在您提供的示例链接中，您在问题中没有提到两个重要的工作类：

.main-content-wrapper {
    margin-left: 240px;
    ...
    transition: all .3s ease-in-out;
}
.main-content-toggle-left {
    margin-left: 0;
}

margin-left: 240px on .main-content-wrapper将主要内容颠倒到右边以容纳侧边栏。 当侧边栏关闭时，会应用.main-content-toggle-left ，因此通过margin-left: 0;减少边距margin-left: 0; 。 这会将主要内容移回到拥抱屏幕的左侧。 最后， transition: all .3s ease-in-out; 匹配侧边栏上的过渡，确保它们以相同的速率移动。

在你的情况下，你在.slide-outt类中使用left: -210px而不是边距，大概是期望如果侧边栏移开主要内容将跟随的方式。 但是，由于您在侧边栏上使用position: absolute ， 因此它不会将其他元素排除在外 ，因此在应用left: -210px时不会影响页面的流量。

为了使您的主要内容跟随侧边栏，您需要对主要内容应用转换，以便以相同的费率向左移动。 必要的样式完全取决于主要内容的当前位置，但可能的常见选项包括更改其left值，侧边栏或使用边距。

有关更多信息，请参阅position ， left和margin的MDN文档。 请注意， left和margin - 就像许多属性一样 - 将根据元素的定位类型产生不同的结果。