无法减小标签和控件之间的间距

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

检查col-form-label类中的css属性，如margin、padding。因为，您将其用于可能会添加一些空间的<label>标记。

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