附加侧边栏覆盖 Angular Material 弹性行

Question

想法是当屏幕尺寸小于 1200px 左右时，让侧边栏保持在顶部。当屏幕尺寸大于 1200 像素时 - 应在用户向下滚动页面时固定边栏。目前附加侧边栏 <div class="side-tool-panel" layout="column"> 会干扰相邻容器 <div class="content-wrapper" layout="row" layout-wrap>。如何让<div class="content-wrapper" layout="row" layout-wrap>自动换档给<div class="side-tool-panel" layout="column">补位？

codepen

Answer 1

您可以使用 Angular Material 的 layout system 来做到这一点。试试这个：

<div ng-app="MyApp" ng-controller="AppCtrl" class="dialogdemoBasicUsage" id="popupContainer" ng-cloak="" layout="column" layout-gt-md="row" layout-wrap>
    <div class="side-tool-panel" layout="column" flex-gt-md="15"></div>
    <div class="content-wrapper" layout="row" layout-wrap flex-gt-md="85"></div>
</div>

在此代码中，我使用了 layout-gt-md，其中 width >= 1280px。然后，我在 2 children div 中使用 flex-gt-md。 Here

希望对您有所帮助。

附加侧边栏覆盖 Angular Material 弹性行

Affix sidebar overlays Angular Material flex row

css

flexbox

angularjs

twitter-bootstrap-3

angular-material