我想使用 Bootstrap 定位影像卡以覆寫卡頂部邊框嗎？不使用CSS。
我試過使用 CSS：
style="margin: -50px 70px;"
但我想用引導程式來做
uj5u.com熱心網友回復：
這可以通過以下類來完成，這些類position-absolute top-0 start-50 translate-middle將元素 0 的中間從頂部定位，從左到右居中。https://getbootstrap.com/docs/5.2/utilities/position/#center-elements
這是一個例子：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/200" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/199/200" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/198" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/199" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>請注意 、和上的邊距和填充類.col，以防止影像與其他元素重疊或脫離畫布。.card.card-body
uj5u.com熱心網友回復：
您的問題不清楚，您沒有提供任何代碼。所以我認為你可以這樣解決這個問題，
<div class="row">
<div class="col-md-6 col-xl-3">
<div class="border border-dark text-center">
<img
width="90"
height="90"
style="border-radius: 100%; margin-top: -45px"
src="https://randomuser.me/api/portraits/women/65.jpg"
alt=""
/>
<h3>Name Here</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus pariatur nisi veniam dolorem architecto,
voluptatibus maxime eaque accusantium illum magni.
</p>
</div>
</div>
</div>
忽略row和col-md-6 col-xl-3類。這些類用于提供像您的影像一樣的形狀。margin-top簡單地說，你可以用css解決你的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534533.html