html - 即使通过引导程序设置宽度后控件也无法正确对齐
问题描述
我正在创建一个每行包含四个控件的 UI。它将有一个标签和控件,然后是另一个标签和控件。如果您在我的标记中看到,我已将 col-md-2 设置为标签,将 col-md-4 设置为控件,但第二个控件似乎已换行并进入下一行。我不确定它为什么这样做,因为它总共宽度为 12。如果单击右上角的编辑按钮,您可以切换以查看控件
我还创建了一个 stackblitz 来复制这个问题
https://angular-lmck2c.stackblitz.io
标记
<style>
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: black;
/* background-color: #F5F7F7; */
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.panel-heading label {
margin-bottom: 0px !important;
}
</style>
<div class="card" style="height: 100%; width: 100%;">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Terms</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<label style="text-align: center; vertical-align:middle" class="btn btn-primary"
[ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox"
[(ngModel)]="EditMode" class="hidden" />Edit Mode</label>
</div>
</div>
<div class="card-body">
<div class="form-group row" style="width: 100%;">
<label for="inputName" class="col-md-2 col-form-label modal-label">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Name</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm"
/>
</div>
<label for="inputOffice" class="col-md-2 col-form-label ">Side Letter Agreement</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<label *ngIf="EditMode" style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" style="width: 13px; height: 13px;" />
Yes </label>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-form-label ">Vehicle Type</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Vehicle Type</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label ">Side Letter Details</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<textarea *ngIf="EditMode" kendoTextArea></textarea>
</div>
<div class="col-md-4">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
</div>
<label for="inputTitle" class="col-md-2 col-form-label ">Plan Asset Fund</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Asset Fund</div>
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" style="width: 13px; height: 13px;" />
Yes </label>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">NAV Reporting Cycle</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label ">Fund Currency</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label ">Audit Year End</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
</div>
</div>
</div>
解决方案
我整理了你的代码,看看这是否适合你。
.panel-heading {
color: black;
/* background-color: #F5F7F7; */
border-color: #ddd;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px;
font-size: 18px;
font-weight: bold;
}
.panel-heading label {
margin-bottom: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card w-100">
<div class="card-header panel-heading">
<span class="left-label">Fund Terms</span>
<div class="float-right">
<label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngclass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox" [(ngmodel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Name</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Name</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
<label for="inputOffice" class="col-md-2 col-form-label">Side Letter Agreement</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<div *ngif="EditMode" class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Yes</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-form-label">Vehicle Type</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Vehicle Type</div>
<kendo-dropdownlist *ngif="EditMode" class="form-control form-control-sm" [filterable]="false" textfield="NAME" [valueprimitive]="true" valuefield="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label">Side Letter Details</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<textarea *ngif="EditMode" kendotextarea="" class="form-control form-control-sm"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
<label for="inputTitle" class="col-md-2 col-form-label">Plan Asset Fund</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Asset Fund</div>
<div *ngif="EditMode" class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Yes</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">NAV Reporting Cycle</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<kendo-dropdownlist *ngif="EditMode" class="form-control form-control-sm" [filterable]="false" textfield="NAME" [valueprimitive]="true" valuefield="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Fund Currency</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Audit Year End</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngif="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3" (click)="saveManager()">Save</button></span>
</div>
</div>
</div>
如果您仍想在标签上设置左边距,您可以将其包装label
在 contains 中div
:
.col-form-label {
margin-left: 0.5rem;
}
<div class="form-group row">
<div class="col-md-2">
<label for="inputName" class="col-form-label">Name</label>
</div>
<div class="col-md-4">
...
或将标签文本包装在 a 中span
:
.col-form-label span {
display: inline-block;
margin-left: 0.5rem;
}
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label"><span>Name</span></label>
<div class="col-md-4">
...
推荐阅读
- python - 如何使用 pywinauto 选择并单击 iexplorer 工具栏上的按钮
- python - 重新格式化数 TB 数据的最快方法
- visual-studio-2015 - 带有 BizTalk Server 2016 的 Visual Studio 2015 无法加载 Microsoft.BizTalk.CrossReferencingFunctoids.dll
- bash - 仅为一个管道更改 Jenkins shell
- opencv - 在 png 文件中找到汇编代码是否正常?
- excel - 运行时错误“-2147221080 (800401a8)”对象“_Workbook”的方法“工作表”失败
- javascript - android 当我转到 API>19 时,我的 Java 接口给了我“TypeError: Android.mthod is not a function
- c++ - 从 Visual Studio 2017 运行 MPI 应用程序,每个进程在不同的 cmd 窗口中
- javascript - React Navigation 参数不会重置
- python - 在自定义测试库中捕获失败的屏幕截图