如何使网站内容在右侧边栏之后？

Posted 2023-03-06

【中文标题】如何使网站内容在右侧边栏之后？

【英文标题】：How to make website content go after sidebar to the right?

【发布时间】：2021-12-04 06:48:04

【问题描述】：

这是一个 Angular 12 项目。我有一个用固定位置定义的侧边栏。它位于应用程序组件中，因此出现在每个页面上。但是，当我点击主页按钮时，如何确保主页中的内容始终位于右侧侧边栏之后，并且左侧和右侧之间的间距相等？

这是我的代码：

<nav class="navbar navbar-expand d-flex flex-column align-item-start sidebar">
    <a class="navbar-brand mt-2">
      <img  [src]="IconUrl"  >
    </a>

 <ul class="navbar-nav d-flex flex-column mt-2 w-100">
     <li class="nav-item w-100">
         <a class="nav-link text-light pl-4" [routerLink]="['home']" 
          routerLinkActive="active"><i class="fa fa-home me-2"></i>Home</a>
    </li>

 </nav>

styles.scss

.sidebar 
 width: 20%;
 height: 100vh;
 position: fixed;
 background-color: $purple;
 transition: all 0.4s ease;
color: $white;

【参考方案1】：

您可以为内容元素设置填充或边距。假设你的侧边栏有 200px 宽度，你应该为你的内容元素添加 margin-left : 210px。

【讨论】：

我想将它添加到侧边栏，因为我将为侧边栏中的所有页面使用引导容器。另外如何实现等间距？ ://

例如一个页面有两列。一个用于侧边栏，另一个用于页面内容。您可以将侧边栏项目添加到侧栏列，并添加 作为页面内容列内页面内容的占位符。当您的路线更改时，内容将加载到页面内容列内。

【参考方案2】：

我认为你的侧边栏只需要 margin-right

因此您可以将margin-right: 16px 添加到侧边栏类或将<nav class="mr-3"> 添加到导航标签。

*保证金值取决于你

您还可以通过添加图片获得更好的帮助