【发布时间】：2020-10-26 04:23:51
【问题描述】：
表单水平未水平对齐标签和字段。 我有一个带有表单（有 4 个字段）的页面，底部有一个提交和一个列表。我用于表格，另一个用于列表。 我希望表格与引导水平表格一样对齐。我的 bootstrap.min.css 就是这个版本 -> Bootstrap v4.5.0。 我的代码如下：
<p-messages [(value)]="msgs"></p-messages>
<p-panel >
<p-header>
Header Example
</p-header>
<form [formGroup]="testForm" (ngSubmit)="submitForm(testForm.value)" class="form-horizontal">
<div class="form-group" *ngIf="!this.isTest" style="padding:10px;">
<label class="control-label col-sm-2">Name:</label>
<div class="col-sm-10">
{{this.name}}
</div>
</div>
<div class="form-group" *ngIf="this.isTest" style="padding:10px;">
<label class="control-label col-sm-2">Display For:</label>
<div class="col-sm-10">
<p-listbox formControlName="names" [options]="names" [(ngModel)]="selectedName" [style]="{'width':'300px'}" [listStyle]="{'max-height':'100px'}" [multiple]="true" [checkbox]="true" [filter]="true" optionLabel="name">
<p-header>
Choose
</p-header>
</p-listbox>
</div>
</div>
<div class="form-group" *ngIf="this.isTest">
<p>Selected Names: <span *ngFor="let c of selectedName" style="margin-right: 10px">{{c.name}}</span></p>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">Start Date:</label>
<div class="col-sm-10">
<p-calendar formControlName="startDate" [showIcon]="true"></p-calendar>
<span style="margin-left:35px">{{startDate|date}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">End Date:</label>
<div class="col-sm-10">
<p-calendar formControlName="endDate" [showIcon]="true"></p-calendar>
<span style="margin-left:35px">{{endDate|date}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">Message:</label>
<div class="col-sm-10">
<textarea rows="5" formControlName="message" class="form-control" pInputTextArea ></textarea>
</div>
<div class="col-sm-3"></div>
</div>
<div>
<label class="control-label col-sm-4">
<button type="submit" class="btn btn-primary" > Submit </button>
</label>
</div>
</form>
</p-panel>
<p-panel >
<sampleList [sampleLi]="sampleLi"></sampleList>
</p-panel>
我正在寻找类似此页面Text的引导水平对齐
但是上面用 chrome 渲染的就是下面的一个
Name:
ABCTEST
在 IE 中，我在垂直定位的顶部输入按钮/日期/文本区域下方的另一个标签下方得到了相同的内容。我不明白我的代码有什么问题。 我的引导程序在我的 angular.json 文件“src/assets/css/bootstrap.min.css”中被引用。 chrome 中的检查元素指向 bootstrap.min.css 文件。 任何意见高度赞赏？
【问题讨论】：
-
尝试将表单标签中的 class="form-horizontal" 改为 class="form-inline"
-
@aje form-inline 将所有字段对齐在同一行中。我的要求是将每个 div 对齐在不同的行中。
-
在 bootstrap 4 中有一个新的类。这里有一个参考 getbootstrap.com/docs/4.5/components/forms/#horizontal-form
标签： html css angular bootstrap-4 angular-ui-bootstrap