时间戳

首页 > 解决方案 > 无法缩小标签和控件之间的空间

html - 无法缩小标签和控件之间的空间

问题描述

我试图在我的表单中减少kendo-datepicker和labelEvalDate 之间的空间。我尝试了填充等，但没有帮助。

截屏：

在此处输入图像描述

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

<div class="form-group row col-md-12" style="margin-top:30px">
  <label for="inputFax" class="col-md-1  col-form-label " style="font-weight: bold;">Eval Date</label>
  <div class="col-md-1">

    <kendo-datepicker style="width: 100% ;float: left;"  [format]="'MMMM yyyy'"  [topView]="'decade'" [bottomView]="'year'" [(ngModel)]="evalDate"
      (valueChange)="evalDateChanged($event)">
    </kendo-datepicker>
  </div>

  <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
      (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
      EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
</div>

应用 Thanveer 解决方案后的屏幕截图 在此处输入图像描述

标签： htmlcss

解决方案

为什么不将标签放在与输入相同的 div 中并col-md-1从标签中删除

<div class="form-group row col-md-12" style="margin-top:30px">
  <div class="col-md-1">
 <label for="inputFax" class="col-form-label " style="font-weight: bold;">Eval Date</label>
    <kendo-datepicker style="width: 100% ;float: left;"  [format]="'MMMM yyyy'"  [topView]="'decade'" [bottomView]="'year'" [(ngModel)]="evalDate"
      (valueChange)="evalDateChanged($event)">
    </kendo-datepicker>
  </div>

  <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
      (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
      EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
</div>

推荐阅读