如何解决如何在与 boostrap 反应时使两个 div 重叠
所以,我将 React 与 Bootstrap v4 结合使用。目前,我正在努力使两个 div 重叠,同时仍然保持响应。我可以让 div 在更大的视口中看起来像我想要的样子,但是当调整到移动视图时,它们会变得无响应并且与页面的其余部分交错。
CSS
.max-width-1080 {
max-width: 1080px;
}
.stack-top {
left: -3rem;
top: 5rem;
border: solid 1rem black;
background: black;
border-radius: 1rem;
color: white
}
.stack-bottom {
right: -3rem;
img {
border: solid 1rem black;
background: black;
border-radius: 1.5rem;
}
}
img {
object-fit: cover;
}
.img-1 {
width: 500px;
height: 678px;
}
JSX
import React from "react";
import PDF from "./pdf";
import ".assets/styles/section1.scss";
const sectionOne= () => {
return (
<section className="section1">
<div className="container-fluid text-center pt-5 pb-5 max-width-1080">
<div className="row pb-5">
<div className="col-md-6 stack-bottom">
<img
src="assets/images/1.jpg"
className="img-1"
alt="picture"
/>
</div>
<div className="col-md-6 stack-top">
<PDF />
</div>
</div>
<div className="col-md-12 text-center pt-5 pb-5 pdf-download">
<a
href="./1.pdf"
download="1.pdf"
>
<button>
<span>Download </span>
</button>
</a>
</div>
</div>
</section>
);
};
export default sectionOne;
我正在寻找一种方法,可以让我张贴在相同视口宽度之上的图像保持不变。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。