在引导程序上删除空格白色答案

【问题标题】：Remove a space white on bootstrap在引导程序上删除空格白色
【发布时间】：2021-09-08 08:15:23
【问题描述】：

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

<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;
}

现在，我想删除表格的空白，我找不到类引导程序来应用它？

enter image description here

【问题讨论】：

为什么不提供按钮和标题而不是表格？
@Abin Thaha：我想过，但我不知道 bootstrap。
与标题一起，给出按钮，使用 col-6 分隔它们。轻松
@Abin Thaha：现在可以了，谢谢。

标签： html css bootstrap-4

【解决方案1】：

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

例如

<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">

【讨论】：