我在 Bootstrap 5 中有一張卡片，我希望標題的某些內容右對齊，而其他內容左對齊。到目前為止，無論我做什么，一切都是左對齊的。
這是一些示例代碼：
<div class="card">
<div class="card-header">
<a href="/users">Users</a>
<span class="text-end text-muted">
48
</span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>
所以，在遙遠的span我都試過text-end，float-right和pull-right，但它沒有任何效果。一切都是左對齊的。
非常感謝大家的幫助。
此外，關于此類主題有幾個問題，但大多數示例都在 Bootstrap 4 中。我正在尋找特定于 Bootstrap 5 的內容，因為 Bootstrap 4 示例似乎不起作用。
uj5u.com熱心網友回復：
<div class="card ">
<div class=" card-header">
<a href="/users">Users</a>
<span class="float-end text-muted">
48
</span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>
喲還可以將標題的內容移動到正確的位置
<div class="card ">
<div class=" card-header text-end">
<a href="/users">Users</a>
<span class="float-end text-muted">
48
</span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>
uj5u.com熱心網友回復：
這可以通過Flex完成。
適用.d-flex于.card-header然后.ms-auto到<span>你想上的權利。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="card">
<div class="card-header d-flex">
<a href="/users">Users</a>
<span class="ms-auto text-muted">48</span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>uj5u.com熱心網友回復：
還有其他類似的Bootstrap 5 答案。為了支持 RTL，Bootstrap 5 中的所有使用left和right都已替換為start和end ...
在您的情況下，最簡單的方法是使用float-end...
<div class="card">
<div class="card-header">
<a href="/users">Users</a>
<span class="float-end text-muted"> 48 </span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>
或者，使用d-flex然后使用auto margin ( ms-auto)...
<div class="card">
<div class="card-header d-flex">
<a href="/users">Users</a>
<span class="ms-auto text-muted"> 48 </span>
</div>
<div class="card-body">
<p>Card content</p>
</div>
</div>
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328299.html
標籤：css 推特引导 bootstrap-5