【发布时间】：2021-08-24 15:13:28
【问题描述】：
我正在使用引导程序 5。我想使用 img 标记为移动/平板电脑/桌面显示不同的图像。我正在尝试使用此代码，但我无法使用引导框架的 display 实用程序正确设置包装器 div 的断点。
如果可能的话，我想要三个图像标签，而不是占据 100% 窗口高度的三个不同的 div。
如果您看到代码，我会在背景图像顶部显示一种模式，该模式需要适应所有可用屏幕空间的每个断点。我试过img-fluid w-100 h-100 类，但结果不是很好，我无法裁剪背景。我是用vue做前端的，我不是前端开发者。
谢谢。
<template>
<div class="container-fluid p-0">
<div class="row m-0">
<!-- This div with the image needs to be displayed only on mobile sm breakpoint -->
<div class="col-lg-12 d-md-none d-lg-none d-sm-block p-0">
<img class="img-fluid w-100" src="@/assets/sm-background.png">
</div>
<!-- This div with the image needs to be displayed only on tablet md breakpoint -->
<div class="col-lg-12 d-none d-sm-none d-lg-none d-md-block p-0">
<img class="img-fluid w-100" src="@/assets/md-background.png">
</div>
<!-- This div with the image needs to be displayed only on desktop lg breakpoint -->
<div class="col-lg-12 d-none d-sm-none d-md-none d-lg-block p-0">
<img class="img-fluid w-100" src="@/assets/lg-background.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 mx-auto position-absolute" id="checkModal">
<div class="card">
<div class="card-body">
<h4>Age verification required</h4>
<p>...</p>
<input type="date" class="form-control" v-model="birthDate" >
<input type="passwrd" class="form-control" v-model="passwor" >
<button class="btn btn-primary" @click.prevent="unlockContent()">Conferma</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
birthDate: '',
password: ''
}
},
mounted() {
},
methods: {
unlockContent() {
console.log(this.birthDate, this.password);
}
}
}
</script>
<style>
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
#checkModal {
top: 14%;
left: 0;
right: 0;
z-index: 1;
}
</style>
´``
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-5