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

Question

我正在尝试缩小表单中kendo-datepicker和label EvalDate之间的空间。我尝试了诸如填充等操作，但没有帮助。

屏幕截图：

<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解决方案后的屏幕截图

Answer 1

为什么不将标签与输入放在同一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>

Answer 2

假设您正在使用bootstrap 4，则可以将label和date-picker包装在同一column中

<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="container">
	<div class="row">
		<div class="form-group col-lg-12">
			<div class="row">
				<div class="col-lg-4">
        <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-lg-2">
					<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>
		</div>
	</div>
</div>

Answer 3

检查类margin中的css属性，例如padding，col-form-label。既然如此，您正在将其用于可能会增加一些空间的<label>标签。

如果col-form-label中没有样式，请尝试将整个<label>放入新的<div>元素中。希望对您有帮助！