【发布时间】：2020-03-17 14:08:22
【问题描述】：
在我的 Angular 9 应用程序中，我有一张引导卡，在卡体中
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g{{ei}}"
*ngFor="let g of this.stat?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<!-- <i class="fa fa-align-justify"></i> Combined All Table -->
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
<i class="fa fa-align-justify"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body" style="border: 1px solid red">
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<!-- COLUMN #1 (ROW NUMBER COLUMN) -->
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<!-- COLUMN #2 ( TEXT COLUMN ) -->
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) -->
<div style="border:1px solid blue;"
id="qrow_pgr_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<progress-display id="pgr_{{q?.QuestionId}}"
value='{{this.roughValue}}'
maxProgress="100"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
</progress-display>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
{{q?.DemoText}}
</div>
<br>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_pgr_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
<!-- ./ The core of the Suervey Question and stars -->
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:0px solid black;text-align:center; margin-left: 2%;margin-right: 2%;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
我正在尝试在引导卡上构建以下布局::
我用以下 cmets 标记了我想在布局中格式化的列::
- 第 1 列（行号列）
- 第 2 列（文本列）
- 第 3 列（进度条显示组件）
这是从上述完整标记中提取的卡体标记::
<div class="card-body" style="border: 1px solid red">
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<!-- COLUMN #1 (ROW NUMBER COLUMN) -->
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<!-- COLUMN #2 ( TEXT COLUMN ) -->
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) -->
<div style="border:1px solid blue;"
id="qrow_pgr_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<progress-display id="pgr_{{q?.QuestionId}}"
value='{{this.roughValue}}'
maxProgress="100"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
</progress-display>
</div>
</div>
</div>
但我无法获得响应式布局，并且三列布局保持居中。我也希望图像上显示的结构也能响应。
更新 1.如何使以下div扩展以适应卡体
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
- 如何使列“第 3 列（进度条显示组件）”扩展到剩余宽度
还有 <div class="row justify-content-md-center" 的 div 必须是响应式的，其中整行必须在同一行
【问题讨论】：
标签： css angular twitter-bootstrap bootstrap-4