Html 如何使用引导创建左侧导航栏？

如何使用引导创建左侧导航栏？ 我做到了

<nav class="btn-group-vertical float-left navbar">
    <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button>
    <button routerLink="product/favorite" routerLinkActive="is-active" class="btn btn-outline-dark">Favorite</button>
</nav>

但问题是，我认为这是出乎意料的

我希望所有的锄头工作都处于良好的位置 但是要很好地使用bootstrap4

---

感谢帮助：-

据我所知，您正在尝试创建侧导航栏，并希望在右侧显示组件。在这种情况下，当您通过routerLink调用组件时，应将特定css应用于每个被调用的组件，以便在右侧看到它们

<style>
      router-outlet + * {
        float:right;
        position:absolute;
}
</style>

此css代码将应用于router-outlet带来的每个组件。如果您需要，可以添加一些边距

在这里你可以看到我为你做了什么：

---

这是我在一个项目中使用的一种很好的、现代的、反应迅速的方法。我希望有帮助

注意：javascript部分将被angular应用程序核心模块中的共享服务所取代，在该模块中，您应该使用Behavior Subject从另一个组件传递sidenav的状态

快速示例：

export class SidenavService {

    private sidenavState$ = new BehaviorSubject<boolean>(false);

    ...

.网格容器{ 显示：网格； 网格模板列：1fr； 网格模板行：60px 1fr 60px； 网格模板区域：“HeaderManfooter”； 高度：100vh； } @仅介质屏幕和最小宽度：768px{ .网格容器{ 网格模板列：260px 1fr； 网格模板区域：sidenav headersidenav Main sidenav footer； } } .侧导航{ 网格区域：sidenav； 显示器：flex； 弯曲方向：立柱； 身高：100%； 宽度：260px； 填充：0.8rem； 位置：固定； 溢出y：自动； z指数：4； 转换：translateX-300px； 盒影：0 1rem 2rem rgba0,0,0,5； 过渡：所有。1s线性； 背景色：fff； } .侧导航打开{ transform:translateX0； } .sidenav_uu打开图标：悬停{ 背景色：ececec； } .sidenav_uu关闭图标{ 位置：绝对位置； 能见度：可见； 顶部：5px； 右：5px； 光标：指针； 字体大小：20px； 宽度：20px； 高度：20px； 颜色：E0； 显示：网格； 放置项目：中心； 边框：实心1px透明； 边界半径：50%； 背景色：透明； } @仅介质屏幕和最小宽度：768px{ .侧导航{ transform:translateX0； } .sidenav_uu关闭图标{ 可见性：隐藏； } } ul.sidenav_uu列表{ 填充：0； 页边顶部：1rem； 列表样式类型：无； 最大宽度：340px； 溢出y：自动； } li.sidenav_uu列表项{ 利润底部：4倍； 背景色：ddd； 边框：实心1px透明； 边界半径：6px； 边框底部：实心4px d2d2d2； } li.sidenav_uu列表项>a{ 宽度：100%； 填充：.7rem 1rem； 显示：块； 位置：相对位置； 颜色：333； 文字装饰：无； } li.sidenav_uulist-item>a:悬停， li.sidenav_uu子列表-item>a:悬停{ 背景色：d2d2d2； 光标：指针； } .sidenav__图标{ 宽度：40px； 填充：0.2px； 显示：内联块； 保证金权利：.4rem； } li.sidenav_uu列表项>a.插入符号{ 位置：绝对位置； 右：16px； 顶部：自动； } li.sidenav_uu列表项>a.caret>i{ 字体大小：12px； } ul.sidenav_uu子列表{ 填充：0； 列表样式类型：无； } li.sidenav_uu子列表项：第一个孩子{ 保证金：5雷姆0； } li.sidenav_uu子列表-item>a{ 宽度：100%； 填充：.5rem1rem； 字号：80%； 显示：块； 位置：相对位置； 颜色：333； 边框：实心1px透明； 边界半径：4px； } [角色=导航菜单]， [角色=导航下拉项]{ 光标：指针！重要； } [角色=导航下拉列表]{ 游标：默认！重要； } .标题{ 网格区域：标题； 背景色：ddd； } 主要{ 网格区域：主； } 页脚{ 网格区域：页脚； } 标题 身体 页脚 打开 关

---

您需要使用容器，然后一行接一行，然后您需要定义两列，第一列为导航，第二列为家庭作业！像这样的导航巴登是行不通的。我需要这将是第一个'家庭作业PD：只有当视口宽度低于768px时，它才会关闭。我有一点问题，因为我希望我的子组件处于中间位置，在我编写代码后，它不起作用，将它们向左或向右移动