內容不隨滑動側菜單移動

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 - 就像許多屬性一樣 - 將根據元素的定位類型產生不同的結果。