左侧导航栏过度折叠时如何解决设计问题

Question

在我的页面中，我使用的是左侧导航栏，因此，当我展开和折叠导航栏时，div宽度就会改变。由于这种变化，整个设计也将发生变化。

折叠导航栏时

导航栏展开时

当左侧导航栏为Expand时，它可以正常工作。

因此，当导航栏扩展或折叠时，我想使背景宽度保持相同。

Answer 1

请重读您的问题并添加更多信息，并使用正确的英语。您是否要使用javascript或纯CSS解决方案？

导航栏是否由于CSS媒体查询而崩溃？ 在这种情况下，您可以使用以下.scss解决方案根据屏幕尺寸应用背景属性更改：

$widthMedium: /*apply amount of pixels of media query of collapsable nav*/ px;

@mixin on-max-widthMedium {
  /* Do max-width for a behavior on a width below a certain limit */
  @media (max-width:$widthMedium) {
    @content;
  }
}

.classYouWantToChangeWhenNavBarIsNotCollapsed {
  @include on-max-widthMedium { 
     // For example:
     background-size: contain;
  }
}