我认为图片是自我解释
我希望这些卡片能填满剩余区域。无论如何,我尝试都会失败...
<div class="card">
<div class="card-header bg-primary text-light">
Title
</div>
<div class="card-body">
<div class="d-flex">
<div class="p-2">
<ul class="list-group">
<li class="list-group-item">abc cba abc</li>
<li class="list-group-item">cba abc cba</li>
</ul>
</div>
<div class="flex-column">
<div class="card p-2 flex-grow-1" style="margin-bottom: 5px;" *ngFor="let phraseByCategory of queries.phrasesByCategory">
<h5 class="card-title"> {{phraseByCategory.category}}</h5>
<div class="card-body">
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您应该在弹性容器flex-grow-1
中添加d-flex
,因为display: flex
仅影响一个1深层。
display属性仅影响给定元素的直接呈现
<div class="card">
<div class="card-header bg-primary text-light">
Title
</div>
<div class="card-body">
<div class="d-flex">
<div class="p-2"> <!-- they are on same level -->
<ul class="list-group">
<li class="list-group-item">abc cba abc</li>
<li class="list-group-item">cba abc cba</li>
</ul>
</div>
<div class="flex-column flex-grow-1"> <!-- here --> <!-- they are on same level -->
<div class="card p-2" style="margin-bottom: 5px;" *ngFor="let phraseByCategory of queries.phrasesByCategory">
<h5 class="card-title"> {{phraseByCategory.category}}</h5>
<div class="card-body">
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
此处的工作示例:https://stackblitz.com/edit/angular-ivy-hb4v4t?file=src%2Fapp%2Fapp.component.html