带角度导航栏 flex-column 空白的引导程序答案

【问题标题】：bootstrap with angular navbar flex-column blank带角度导航栏 flex-column 空白的引导程序
【发布时间】：2018-11-26 10:44:51
【问题描述】：

在我的 Angular 项目中，我尝试在屏幕左侧插入一个引导导航栏，但我有一点空白，即使使用 container-fluid 也无法删除。

我将这段代码用于导航栏：

<!-- admin.component.html -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2">
      <nav class="navbar navbar-light bg-dark">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" routerLink="/admin/themes">Themes and categories creation</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col">

      <router-outlet></router-outlet>

    </div>
  </div>
</div>

在我的应用组件中这样调用：

<!-- app.component.html -->
<app-topbar></app-topbar>
<router-outlet></router-outlet>

示例：

我还尝试在我的 container-fluid 上使用一些 css，但没有成功。

我怎样才能去掉这个小空白？

提前感谢您的帮助。

【问题讨论】：

您使用的外部 html 和 css 是什么？包含 tobar 和 router-outlet 的那个

标签： angular twitter-bootstrap css flexbox

【解决方案1】：

尝试在此处保持容器液体...

<div class="container-fluid">
  <app-topbar></app-topbar>
  <router-outlet></router-outlet>
</div>

并保持您的其他 html 没有容器流体

<div class="row">
    <div class="col-sm-2">
      <nav class="navbar navbar-light bg-dark">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" routerLink="/admin/themes">Themes and categories creation</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col">

      <router-outlet></router-outlet>

    </div>
  </div>

【讨论】：