html - 恢复页面时 Html / CSS 网页内容混合
问题描述
我使用 html、CSS 和引导程序创建了这个网页,在大屏幕和中屏幕上一切正常,但是当我恢复到小屏幕(col-12 和 col-sm-12)时,功能和服务部分融合在一起,我尝试了所有我不知道如何解决的方法。
这是一些代码,我希望你们清楚:
* {
padding: 0;
margin: 0;
font-family: "Lucida Fax", sans-serif;
}
body {
overflow-x: hidden;
}
.header .content-box {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/Webz.jpeg);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
}
.menu {
display: inline-flex;
}
.menu button {
width: 75px;
height: 35px;
}
.menu img {
width: 147px;
height: 147px;
cursor: pointer;
margin-top: 1px;
}
.menu button {
background: #ff4d73;
font-size: 16px;
color: #fff;
border: 0;
position: absolute;
right: 70px;
top: 40px;
cursor: pointer;
}
.menu button .fa {
margin-right: 7px;
}
.banner-text {
color: whitesmoke;
margin: 14%;
text-align: center;
}
.banner-text h2 {
font-size: 37px;
}
.banner-text p {
font-size: 15px;
margin: 25px;
}
.banner-text a {
border: 1px solid #ff4d73;
padding: 7px;
color: white;
text-decoration: none;
display: block;
width: 100px;
margin: auto;
background: #ff4d73;
transition: .70s;
}
.banner-text a:hover {
background: transparent;
}
.service .content-box {
background: whitesmoke;
width: 100%;
height: 100vh;
}
h1 {
text-align: center;
padding-top: 100px;
}
.service h1::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 190px;
margin: 21px auto 50px;
}
.services .icon {
font-size: 37px;
margin: 21px auto;
height: 55px;
width: 55px;
border: 1px solid #ff4d73;
border-radius: 50%;
color: #ff4d73;
}
.services p {
font-size: 12px;
margin-top: 10px;
color: #777;
padding: 20px;
}
.services span {
color: #ff4d73;
}
h3 {
font-size: medium;
}
.services .col-md-3:hover {
background: #ff4d73;
cursor: pointer;
color: #fff;
box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.4);
transition: 0.5s;
}
.services .col-md-3:hover p {
color: #fff;
}
.services .col-md-3:hover span {
color: #fff;
}
.services .col-md-3:hover .icon {
border: 1px solid #fff;
color: #fff;
}
li {
padding-left: 35px;
}
.features .content-box {
background: white;
width: 100%;
height: 100vh;
}
.features h2 {
margin: 49px;
padding-top: 111px;
}
.features h2::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 150px;
margin: 13px 7px 51px;
}
.features ul {
margin-left: 5px;
margin-top: 33px;
list-style-type: none;
}
.features ul li {
position: relative;
line-height: 33px;
font-size: 13px;
}
.features ul li::before {
content: '';
height: 7px;
width: 7px;
background: #ff4d73;
transform: rotate(45deg);
margin-right: 19px;
display: inline-block;
}
img {
height: 57%;
width: 85%;
margin-top: 29%;
}
.footer .content-box {
background: whitesmoke;
width: 100%;
height: 100vh;
}
.footer h1::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 190px;
margin: 21px auto 50px;
}
.form-control {
margin: 17px;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
::placeholder {
font-size: 12px;
}
.contact-form button {
border: none !important;
background: #ff4d73 !important;
box-shadow: none !important;
border-radius: 0;
margin-left: 27px;
}
.contact-info .follow {
background-color: #fff;
padding: 8px;
margin: 11px;
}
.contact-info .fa {
margin: 10px;
padding-right: 20px;
font-size: 20px;
font-weight: bold;
color: #ff4d73 !important;
}
.copyright {
text-align: center;
font-size: 15px;
}
.fa-heart-o {
color: red;
font-size: 17px;
}
.footer hr {
margin-top: 217px;
background: #ff4d73;
}
.form-group label {
display: block;
}
.features {
position: relative;
top: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- Service Section -->
<section class="service d-block">
<div class="content-box">
<div class="container">
<h1>Our Services</h1>
<div class="row services d-block">
<div class="col-md-3 col-sm-12 col-12 text-center">
<div class="icon">
<i class="fa fa-renren"></i>
</div>
<h3>Brand <span>Activation</span></h3>
<p>
Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-user"></i>
</div>
<h3>Employee <span>Activity</span></h3>
<p>
Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-meetup"></i>
</div>
<h3>Event <span>Organizer</span></h3>
<p>
Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-video-camera"></i>
</div>
<h3>Video <span>Production</span></h3>
<p>
Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features d-block">
<div class="content-box">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-12">
<h2>Features Are</h2>
<ul>
<li>Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text. </li>
<li>Some Text Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text.</li>
</ul>
</div>
<div class="col-md-6 col-sm-12 col-12">
<img src="img/Webz2.jpeg" alt="Picture">
</div>
</div>
</div>
</div>
</section>
</body>
</html>
解决方案
您的内容大于 100vh,但您将容器限制为该大小。这就是重叠的原因。
.content-box {
height: 100vh;
}
推荐阅读
- puppeteer - 检查所有要加载的帧
- java - 程序类型已经存在:android.support.v7.util.MessageThreadUtil$1$1
- python - 如何在 python 中签署和发送 Mimultipart 消息?
- php - PHP Websocket 可能根本不通过 Cloudflare?
- mysql - MySQL 5.7 - 在 JSON 中增加一个数字
- asp.net-web-api - 如何使用 Identity Server 4 (JWT) 进行基于角色的 Web API 授权
- python - 独立于控制台,python 读写多个文件
- css - WPBakery 手风琴背景颜色
- conditional - 函数的 Mathematica 条件
- python - 扫雷的网格生成