[英]Add fixed size of card in CSS
我已經嘗試並未能為我在我的頁面中實現的卡調整固定大小。
問題是,它只會根據描述中“進度”的字符數量進行調整。
這是我的意思的圖片,以及我想要它的位置(紅線代表所需的大小):
這是我的代碼:
<div class="container-xl container-fluid py-3">
<div class="row">
<div class="card card-progress">
<div class="card-body">
<h3 class="pb-3">A title</h3>
<div class="h3 mb-2">A description</div>
<hr/>
<div style="padding-top: 2%"></div>
<div class="h5">Updated progress:</div>
<div class="progress mb-4">
<div
role="progressbar"
style="width: {{ $progress->progress }}%"
aria-valuenow="{{ $progress->progress }}"
aria-valuemin="0"
aria-valuemax="100"
class="progress-bar progress-bar bg-primary"
></div>
</div>
<div class="d-flex justify-content-between">
<div class="text-left">
<div>Progress made by:</div>
<div class="text-primary h3 mb-0">
<p>
Daniel
</p>
</div>
</div>
<div class="text-right">
<div>Current progress of the homework after this addition:</div>
<div class="text-primary h3 mb-0">
<p>
87%
</p>
</div>
</div>
</div>
<a href="#" class="btn btn-danger"><i data-feather="trash" class="icon-light icons-sm"></i></a>
<a href="#" class="btn btn-warning"><i data-feather="edit" class="icon-light icons-sm"></i></a>
</div>
</div>
</div>
</div>
請不要提供硬編碼的解決方案。
看起來你是 Bootstrap 4。
因此,最簡單的解決方案是將.w-100
class 添加到卡中。 它將卡片的寬度設置為容器的 100%。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.