我正在嘗試將 figma 設計轉換為適用于所有設備的回應式網站。但是我在制作具有文本和影像移動回應的部分時遇到了麻煩，因為我應該將一個影像作為
. 我知道我的代碼不干凈，但這是我第一次嘗試使引導代碼具有回應性，因為我剛剛開始使用引導程式。這是我的代碼。我已經使包含標題、文本和按鈕的部分具有回應性，并且它們在我的手機上運行良好。我只有影像有問題。
<section class="bg-white text-dark mt-5 text-center text-sm-start">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm">
<h2 class="mt-5 pt-5 deliver"> We Deliver Everywhere in <br>the Syokimau Area</h2>
<div class="d-sm-flex text-md-center text-md-start text-wrap">
<p class="deliver-paragraph mb-4 text-sm-start " style="width:100%"> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent eget pulvinar nisi. Aenean sed sem venenatis, egestas felis vel,
dictum urna. Phasellus rutrum placerat orci. Integer in varius ex. Praesent libero
orci, consectetur eget mauris in, vehicula tincidunt purus. Vivamus tempor non
mauris quis pharetra.</p>
</div>
<div class="">
<span><button class="btn btn-outline-primary mb-4" id="btn-1">View Location</button></span>
<span><button class="btn btn-primary text-white ms-3 mb-4" id="btn-2">View Location</button></span>
</div>
<div class="col">
<img class="img-fluid" src="images/blob.png" id="blob">
</div>
</div>
<div class="container">
<div class="col">
<img class="img-fluid" src="images/waterdrink.png" id="waterdrink">
</div>
</div>
</div>
</div>
</section>
uj5u.com熱心網友回復：
我會這樣做以使blob影像成為列中的背景，并將waterdrink影像完全按照您所做的放置在列中。1 列。
html
<div class="col bg-blob">
<img class="img-fluid" src="images/waterdrink.png" id="waterdrink">
</div>
<!-- As you know img-fluid is ensuring the picture stays at full
column width. We will do that with the blob background too -->
css
.bg-blob{
background: url(images/blob.png) 50% 50% no-repeat;
background-size: cover;
}
/* 50% 50% is going to center your image in the column no matter
it's size so you can alter those values at your leisure */
/* Background-size:cover will make sure that your image
is always the exact width of the column */
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375588.html
標籤：推特引导 bootstrap-5
上一篇：Boostrap的彈出框僅顯示標題并在第一次切換后停止作業
下一篇：CSS根據內容對齊列中的專案