使用 Bootstrap 使网站具有移动响应性答案

【问题标题】：Making Website Mobile Responsive using Bootstrap使用 Bootstrap 使网站具有移动响应性
【发布时间】：2021-12-02 17:19:48
【问题描述】：

我正在尝试将 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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

我会这样做以使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 */

【讨论】：