位置按钮在 sidenavbar 底部右对齐

Question

我一直试图在底部的 sidenav 中并排放置两个按钮，但它们总是在列表结束后才出现。我希望 sidenav 底部的添加和删除按钮（按钮栏组件）始终右对齐。

下面是我的代码：

drawer.component.html

<aside class="panel">
  <div class="panel-header">
    <h2 class="panel-title">Title</h2>
  </div>
  <div class="panel-body">
    <div class="form-group search-wrapper">
      <form
        [formGroup]="form"
        >
      <input class="form-control"
             [placeholder]=Placeholder>
      </form>
    </div>
    <ul class="list-group">
      <li *ngFor="let l of list | async as ts"
          class="list-group-item"
          >
        <span>{{ l.name }}</span>
      </li>
    </ul>
  </div>
  <div class="panel-footer">
    <buttons-bar></buttons-bar> ---> Newly added component injected here
  </div>
</aside>

drawer.component.css

.panel {
  box-shadow: 0 0 2px inset $border-primary;
  height: 100%;

  .panel-title {
    color: $color-base-text;
    font-size: $font-size-normal;
    font-weight: bold;
  }

  .panel-header{
    display: flex;
    align-items: center;
    padding: $panel-padding-basic;
    box-shadow: 0 0 2px inset $border-primary;
  }

  .panel-header {
    background-color: $color-base-bg;
    height: 44px;
  }

  &.panel-block {
    .panel-header {
      background-color: $color-base-bg-inv;
    }

    .panel-title {
      color: $color-base-text-inv;
    }
  }
}

.list-group-item {
  cursor: pointer;

  span {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.search-wrapper {
  margin: 0;

  input {
    outline: 0;
    border-radius: 0;
  }
}

.button-icon {
  margin-left: auto;
}

buttons.component.html

<div class="manipulation-bar">
  <div>
    <span [tooltip]="tooltip" class="icon button-icon-delete"> delete_forever</span>
  </div>
  <div>
    <span (click)="openDialog()" [tooltip]="tooltip"
          class="icon button-icon add"> add </span>
  </div>
</div>

buttons.component.css

.manipulation-bar {
  display: flex;
  justify-content: end ;
  align-items: end;


  button {
    margin: 0 .2vw 0 .2vw;
  }
}

.icon {
  font-family: 'Material Icons';
  font-size: 30px;
}

.button-icon-delete {
  color: red;
  cursor: pointer;

  &:hover {
    color: darkred;
  }
}

请有人帮助我理解我做错了什么。

Answer 1

在您的面板中 div 添加 display: flex; flex-direction: column, 并在面板页脚中添加 margin-top: auto; 我认为它会对你有所帮助。

位置按钮在 sidenavbar 底部右对齐

Position buttons right aligned at the bottom in sidenavbar

html

css

angular

sidebar

sidenav