删除bootstrap上的空白

Question

在代码引导中，我想将按钮向上移动到水平条。

输入图片描述

<div class="separator-breadcrumb border-top"></div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<div class="card-title d-flex align-items-center justify-content-end">
<button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary ">
&lt; {{previousYear}}
</button>
<button (click)="showNextYear()" *ngIf="showNextYearButton()" class="btn btn-primary mx-1">
{{nextYear}} &gt;
</button>
</div>
<div class="table-responsive" *ngIf="lines.length > 0">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 25%;">{{'4391' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4392' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4393' | t}}</th>
<th scope="col" style="width: 25%; text-align: right;">{{'4394' | t}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let line of lines; let i = index">
<th style="width: 25%;">
{{line.LIBELLE}}
</th>
<td style="width: 25%; text-align: right;">
{{line.TAUX | number:'1.2-2' | mynamformatnum}} %
</td>
<td style="width: 25%; text-align: right;">
{{line.BASE | number:'1.2-2' | mynamformatnum}} EUR
</td>
<td style="width: 25%; text-align: right;">
{{line.MONTANT | number:'1.2-2' | mynamformatnum}} EUR
</td>
</tr>
</tbody>
</table>
</div>
<h5 *ngIf="lines.length == 0">
{{'4395' | t }}
</h5>
</div>
</div>
</div>
</div>

我在css中添加了一个类btn-top

<button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary btn-top">

和

.btn-top {
position: relative; 
top: -100px;
}

现在，我想要删除表的空白，我找不到类引导应用?

输入图片描述

Answer 1

对于按钮的对齐，与标题一起，给按钮，使用col6分隔它们

例如

<div class="row">
<div class="col-6">
<h3 class="title">Taxes</h3>
</div>
<div class="col-6">
<a href="javascript:void(0)" role="button" class="btn btn-bold btn-sm btn-success">button</a>
</div>
</div>

和删除空间，因为你正在使用"引导卡"它定义了填充来创建空白所以通过添加p-0

来删除填充例如

<div class="card-header p-0">
<div class="card-body p-0">