blocks|key|2768762|text|正如我所理解的，您正在尝试创建侧导航条，并希望在右边的side.In上显示组件--当您通过routerLink调用组件时，应该对每个被调用的组件应用一个特定的css，以便在右边看到它们。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2768763|<style>
++++++router-outlet+%2B+*+{
++++++++float:right;
++++++++position:absolute;
}
</style>|code-block|syntax|javascript|2768764|此css代码将应用于router-outlet.If带来的每个组件，您希望您可以添加一些空白。|2768765|在这里，你可以看到我为你做了什么：|2768766|https://stackblitz.com/edit/angular-router-basic-example-pgr1tv?file=index.html|2768767|entityMap|0|LINK|mutability|MUTABLE|url^0|19|A|0|0|A|D|0|0|0|27|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|Q|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|P]]]]

<p>As I understood,you're trying to create side navbar and want to show component on the right side.In this case when you call a component by <code>routerLink</code>,a specific css should be applied to each called component in order to see them on the right.</p>

<pre><code>&lt;style&gt;
      router-outlet + * {
        float:right;
        position:absolute;
}
&lt;/style&gt;
</code></pre>

<p>This css code will be applied for each component brought by <code>router-outlet</code>.If you want you can add some margin.</p>

<p>Here you can see what I've done for you : </p>

<p><a href="https://stackblitz.com/edit/angular-router-basic-example-pgr1tv?file=index.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-router-basic-example-pgr1tv?file=index.html</a></p>


blocks|key|1756316|text|这里是我在我的一个项目中使用的一种很好的、现代的和响应性的方法。希望能帮上忙。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1756317|注释：(+javascript部分)将被角应用程序的核心模块中的共享服务所取代，在该模块中，您应该使用BehaviourSubject来从另一个组件通信sidenav的状态。|offset|length|style|BOLD|1756318|简单的例子：|1756319|export+class+SidenavService+{

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

++++...|code-block|syntax|javascript|1756320|​|1756321|const+sidenav+=+document.querySelector('#sidenav');

const+toggleSidenav+=+state+=>+{
++sidenav.className+=+state+?+
++sidenav.className.replace('closed',+'opened')+:
++sidenav.className.replace('opened',+'closed');
}|1756322|.grid-container+{
++display:+grid;
++grid-template-columns:+1fr;
++grid-template-rows:+60px+1fr+60px;
++grid-template-areas:+'header''main''footer';
++height:+100vh;
}

@media+only+screen+and+(min-width:+768px)+{
++.grid-container+{
++++grid-template-columns:+260px+1fr;
++++grid-template-areas:+"sidenav+header""sidenav+main""sidenav+footer";
++}
}

.sidenav+{
++grid-area:+sidenav;
++display:+flex;
++flex-direction:+column;
++height:+100%25;
++width:+260px;
++padding:+0+.8rem;
++position:+fixed;
++overflow-y:+auto;
++z-index:+4;
++transform:+translateX(-300px);
++box-shadow:+0+1rem+2rem+rgba(0,+0,+0,+.5);
++transition:+all+.1s+linear;
++background-color:+#fff;
}

.sidenav.opened+{
++transform:+translateX(0);
}

.sidenav__open-icon:hover+{
++background-color:+#ececec;
}

.sidenav__close-icon+{
++position:+absolute;
++visibility:+visible;
++top:+5px;
++right:+5px;
++cursor:+pointer;
++font-size:+20px;
++width:+20px;
++height:+20px;
++color:+#e0e0e0;
++display:+grid;
++place-items:+center;
++border:+solid+1px+transparent;
++border-radius:+50%25;
++background-color:+transparent;
}

@media+only+screen+and+(min-width:+768px)+{
++.sidenav+{
++++transform:+translateX(0);
++}
++.sidenav__close-icon+{
++++visibility:+hidden;
++}
}

ul.sidenav__list+{
++padding:+0;
++margin-top:+1rem;
++list-style-type:+none;
++max-width:+340px;
++overflow-y:+auto;
}

li.sidenav__list-item+{
++margin-bottom:+4px;
++background-color:+#ddd;
++border:+solid+1px+transparent;
++border-radius:+6px;
++border-bottom:+solid+4px+#d2d2d2;
}

li.sidenav__list-item>a+{
++width:+100%25;
++padding:+.7rem+1rem;
++display:+block;
++position:+relative;
++color:+#333;
++text-decoration:+none;
}

li.sidenav__list-item>a:hover,
li.sidenav__sublist-item>a:hover+{
++background-color:+#d2d2d2;
++cursor:+pointer;
}

.sidenav__icon+{
++width:+40px;
++padding:+0+2px;
++display:+inline-block;
++margin-right:+.4rem;
}

li.sidenav__list-item>a+.caret+{
++position:+absolute;
++right:+16px;
++top:+auto;
}

li.sidenav__list-item>a+.caret>i+{
++font-size:+12px;
}

ul.sidenav__sublist+{
++padding:+0;
++list-style-type:+none;
}

li.sidenav__sublist-item:first-child+{
++margin:+.5rem+0+0;
}

li.sidenav__sublist-item>a+{
++width:+100%25;
++padding:+.5rem+1rem;
++font-size:+80%25;
++display:+block;
++position:+relative;
++color:+#333;
++border:+solid+1px+transparent;
++border-radius:+4px;
}

[role="nav-menu"],
[role="nav-dropdown-item"]+{
++cursor:+pointer+!important;
}

[role="nav-dropdown"]+{
++cursor:+default+!important;
}

.header+{
++grid-area:+header;
++background-color:+#ddd;
}

main+{
++grid-area:+main;
}

footer+{
++grid-area:+footer;
}|1756323|<link+href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"+rel="stylesheet"+integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE%2BQkPxCAFlNEevoEH3Sl0sibVcOQVnN"+crossorigin="anonymous">
<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+integrity="sha384-ggOyR0iXCbMQv3Xipma34MD%2BdH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"+crossorigin="anonymous">

<div+class="grid-container">
++<div+id="sidenav"+class="sidenav+closed">
++++<ul+class="sidenav__list">
++++++<li+class="sidenav__list-item">
++++++++
++++++++<a+role="nav-menu">
++++++++++<span+class="sidenav__icon">
++++++++++<i+class="{{m.iconoMenu}}"></i>
++++++++++</span>
++++++++++<span+class="sidenav__title">Home</span>
++++++++</a>
++++++</li>

++++++
++++++<li+class="sidenav__list-item">
++++++++<a+class="accordion-toggle+collapsed+toggle-switch"+data-toggle="collapse"+href="#submenu-1"+role="nav-dropdown">
++++++++++<span+class="sidenav__icon">
++++++++++++<i+class="fas+fa-home"></i>
++++++++++</span>
++++++++++<span+class="sidenav__title">
++++++++++Configuration
++++++++++</span>
++++++++++<b+class="caret">
++++++++++++<i+class="fas+fa-caret-down"></i>
++++++++++</b>
++++++++</a>
++++++++<ul+id="submenu-1"+class="sidenav__sublist+panel-collapse+collapse+panel-switch"+role="menu">
++++++++++<li+class="sidenav__sublist-item"+role="nav-dropdown-item">
++++++++++++<a+href="#">
++++++++++++++<span+class="sidenav__icon"><i+class="fas+fa-cog"></i></span>
++++++++++++++<span+class="sidenav__title">Option+1</span>
++++++++++++</a>
++++++++++</li>
++++++++++<li+class="sidenav__sublist-item"+role="nav-dropdown-item">
++++++++++++<a+href="#">
++++++++++++++<span+class="sidenav__icon"><i+class="fas+fa-cog"></i></span>
++++++++++++++<span+class="sidenav__title">Option+2</span>
++++++++++++</a>
++++++++++</li>
++++++++</ul>
++++++</li>
++++</ul>
++</div>
++<div+class="header">
++++<div+class="container-fluid">
++++++header
++++</div>++++
++</div>
++<main>
++++<div+class="container-fluid">
++++++body
++++</div>
++</main>
++<footer>
++++<div+class="container-fluid">
++++++footer
++++</div>
++</footer>
</div>

<div+style="position:+absolute;+right:+40px;+top:+80px">
++<button+onclick="toggleSidenav(true)">open</button>
++<button+onclick="toggleSidenav(false)">close</button>
</div>
<script+src="https://code.jquery.com/jquery-3.3.1.slim.min.js"+integrity="sha384-q8i/X%2B965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH%2B8abtTE1Pi6jizo"+crossorigin="anonymous"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"+integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"+crossorigin="anonymous"></script>
<script+src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"+integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM%2BB07jRM"+crossorigin="anonymous"></script>|1756324|1756325|entityMap^0|0|0|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|W|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|Y|$]]

<p>Here it is a nice, modern and responsive approach that I used in one of my projects. I hope it helps.</p>

<p><strong>Note:</strong> The javascript part would be replaced by a shared service in your angular application's core module where you should use BehaviourSubject to communicate the state of the sidenav from another component.</p>

<p>Quick example:</p>

<pre><code>export class SidenavService {

    private sidenavState$ = new BehaviorSubject&lt;boolean&gt;(false);

    ...
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const sidenav = document.querySelector('#sidenav');

const toggleSidenav = state =&gt; {
  sidenav.className = state ? 
  sidenav.className.replace('closed', 'opened') :
  sidenav.className.replace('opened', 'closed');
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas: 'header''main''footer';
  height: 100vh;
}

@media only screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: 260px 1fr;
    grid-template-areas: "sidenav header""sidenav main""sidenav footer";
  }
}

.sidenav {
  grid-area: sidenav;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 260px;
  padding: 0 .8rem;
  position: fixed;
  overflow-y: auto;
  z-index: 4;
  transform: translateX(-300px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5);
  transition: all .1s linear;
  background-color: #fff;
}

.sidenav.opened {
  transform: translateX(0);
}

.sidenav__open-icon:hover {
  background-color: #ececec;
}

.sidenav__close-icon {
  position: absolute;
  visibility: visible;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #e0e0e0;
  display: grid;
  place-items: center;
  border: solid 1px transparent;
  border-radius: 50%;
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
  .sidenav {
    transform: translateX(0);
  }
  .sidenav__close-icon {
    visibility: hidden;
  }
}

ul.sidenav__list {
  padding: 0;
  margin-top: 1rem;
  list-style-type: none;
  max-width: 340px;
  overflow-y: auto;
}

li.sidenav__list-item {
  margin-bottom: 4px;
  background-color: #ddd;
  border: solid 1px transparent;
  border-radius: 6px;
  border-bottom: solid 4px #d2d2d2;
}

li.sidenav__list-item&gt;a {
  width: 100%;
  padding: .7rem 1rem;
  display: block;
  position: relative;
  color: #333;
  text-decoration: none;
}

li.sidenav__list-item&gt;a:hover,
li.sidenav__sublist-item&gt;a:hover {
  background-color: #d2d2d2;
  cursor: pointer;
}

.sidenav__icon {
  width: 40px;
  padding: 0 2px;
  display: inline-block;
  margin-right: .4rem;
}

li.sidenav__list-item&gt;a .caret {
  position: absolute;
  right: 16px;
  top: auto;
}

li.sidenav__list-item&gt;a .caret&gt;i {
  font-size: 12px;
}

ul.sidenav__sublist {
  padding: 0;
  list-style-type: none;
}

li.sidenav__sublist-item:first-child {
  margin: .5rem 0 0;
}

li.sidenav__sublist-item&gt;a {
  width: 100%;
  padding: .5rem 1rem;
  font-size: 80%;
  display: block;
  position: relative;
  color: #333;
  border: solid 1px transparent;
  border-radius: 4px;
}

[role="nav-menu"],
[role="nav-dropdown-item"] {
  cursor: pointer !important;
}

[role="nav-dropdown"] {
  cursor: default !important;
}

.header {
  grid-area: header;
  background-color: #ddd;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;

&lt;div class="grid-container"&gt;
  &lt;div id="sidenav" class="sidenav closed"&gt;
    &lt;ul class="sidenav__list"&gt;
      &lt;li class="sidenav__list-item"&gt;
        &lt;!-- Menú con navegación --&gt;
        &lt;a role="nav-menu"&gt;
          &lt;span class="sidenav__icon"&gt;
          &lt;i class="{{m.iconoMenu}}"&gt;&lt;/i&gt;
          &lt;/span&gt;
          &lt;span class="sidenav__title"&gt;Home&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;

      &lt;!-- Menú sin navegación --&gt;
      &lt;li class="sidenav__list-item"&gt;
        &lt;a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-1" role="nav-dropdown"&gt;
          &lt;span class="sidenav__icon"&gt;
            &lt;i class="fas fa-home"&gt;&lt;/i&gt;
          &lt;/span&gt;
          &lt;span class="sidenav__title"&gt;
          Configuration
          &lt;/span&gt;
          &lt;b class="caret"&gt;
            &lt;i class="fas fa-caret-down"&gt;&lt;/i&gt;
          &lt;/b&gt;
        &lt;/a&gt;
        &lt;ul id="submenu-1" class="sidenav__sublist panel-collapse collapse panel-switch" role="menu"&gt;
          &lt;li class="sidenav__sublist-item" role="nav-dropdown-item"&gt;
            &lt;a href="#"&gt;
              &lt;span class="sidenav__icon"&gt;&lt;i class="fas fa-cog"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="sidenav__title"&gt;Option 1&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="sidenav__sublist-item" role="nav-dropdown-item"&gt;
            &lt;a href="#"&gt;
              &lt;span class="sidenav__icon"&gt;&lt;i class="fas fa-cog"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="sidenav__title"&gt;Option 2&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="header"&gt;
    &lt;div class="container-fluid"&gt;
      header
    &lt;/div&gt;    
  &lt;/div&gt;
  &lt;main&gt;
    &lt;div class="container-fluid"&gt;
      body
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer&gt;
    &lt;div class="container-fluid"&gt;
      footer
    &lt;/div&gt;
  &lt;/footer&gt;
&lt;/div&gt;

&lt;div style="position: absolute; right: 40px; top: 80px"&gt;
  &lt;button onclick="toggleSidenav(true)"&gt;open&lt;/button&gt;
  &lt;button onclick="toggleSidenav(false)"&gt;close&lt;/button&gt;
&lt;/div&gt;
&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>How to create a left navbar with bootstrap ?
I did it </p>

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

<p>But the problem that i see it as unexpected</p>

<p><a href="https://i.stack.imgur.com/0x2RG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0x2RG.jpg" alt="enter image description here"></a></p>

<p>I want that all hoe work be with good position 
but use bootstrap 4 well </p>

<p>Thank for help :-)</p>


How to create a left navbar with bootstrap?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用引导创建左导航条？我做到了<nav class="btn-group-vertical float-left navbar">    <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dar...

问如何使用引导创建左导航条？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导创建左导航条？EN