在我的网站上，我有多个标题位于顶部的部分。每个部分都是一个可折叠的div。
现在，当div 折叠时，标题会缩小。这是一个非常烦人的错误。
这是我的网站
如果您尝试按某个部分，您会看到标题缩小/展开
下面是标记：
<!DOCTYPE html>
<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 href="https://fonts.googleapis.com/css?family=Ranga:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<link rel="stylesheet" href="css/style.css">
<title>David Lasry</title>
</head>
<body>
<div class="container py-4">
<header id="main-header">
<div class="row no-gutters">
<div class="col-lg-3 col-md-4">
<img src="img/profile.png" class="img-fluid">
</div>
<div class="col-lg-9 col-md-8">
<div class="d-flex flex-column">
<div id="name" class="px-3 pt-3 bg-dark text-white">
<div class="row">
<div class="col-lg-7 col-md-6 py-2">
<h1 class="display-4">David Lasry</h1>
</div>
<div class="col-lg-5 col-md-6">
<div class="d-flex flex-row align-items-center justify-content-around">
<a href="https://www.facebook.com/dudu.lasry" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.instagram.com/dudulasry/" target="_blank">
<i class="fa fa-instagram"></i>
</a>
<a href="https://github.com/david1542" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</div>
</div>
</div>
<div id="title" class="px-4 bg-black d-flex flex-column justify-content-center">
<h4 class="display-4">
Android Developer/Full Stack Web Developer
</h4>
</div>
<div id="actions" class="text-white text-center">
<div class="port-item bg-primary" data-toggle="collapse" data-target="#home">
<i class="fa fa-home d-block"></i>Home
</div>
<div class="port-item bg-success" data-toggle="collapse" data-target="#resume">
<i class="fa fa-graduation-cap d-block"></i>Resume
</div>
<div class="port-item bg-warning" data-toggle="collapse" data-target="#work">
<i class="fa fa-folder-open d-block"></i>Work
</div>
<div class="port-item bg-danger" data-toggle="collapse" data-target="#contact">
<i class="fa fa-envelope d-block"></i>Contact
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Home -->
<div id="home" class="collapse show">
<div class="card card-body bg-primary text-white py-5 section-text">
<div class="d-flex flex-column justify-content-center">
<h1 id="owner" class="text-center">
Hi, I'm David. I design & build
</h1>
<h1 class="text-center">
<span class="typer" data-words="full stack web applications,landing pages,android applications" data-colors="#FF9E4C" data-delay="100"
data-deleteDelay="800"></span>
<span class="cursor" data-owner="#owner"></span>
</h1>
</div>
</div>
<div class="card card-body py-5">
<h1>My Skills</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos corrupti hic earum nihil quos consectetur.
</p>
<hr>
<h4>HTML</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:100%"></div>
</div>
<h4>CSS</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:100%"></div>
</div>
<h4>JavaScript</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:90%"></div>
</div>
<h4>Java</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:80%"></div>
</div>
<h4>Groovy</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width:70%"></div>
</div>
</div>
</div>
<!-- Resume -->
<div id="resume" class="collapse">
<div class="card card-body bg-success text-white py-5 section-text">
<h1>My Resume</h1>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, facere.
</p>
</div>
<div class="card card-body py-5">
<h3>Where have I worked?</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi est, vitae praesentium magnam laborum officiis?
</p>
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Devmasters</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, quisquam.</p>
<p class="p-2 mb-3 bg-dark text-white">Position: Full Stack Developer</p>
<p class="p-2 mb-3 bg-dark text-white">Phone: (444) 444-4444</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Dates: 2015 - 2017</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Websites Pro</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, quisquam.</p>
<p class="p-2 mb-3 bg-dark text-white">Position: Front End Developer</p>
<p class="p-2 mb-3 bg-dark text-white">Phone: (333) 333-3333</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Dates: 2013 - 2015</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">123 Designs</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, quisquam.</p>
<p class="p-2 mb-3 bg-dark text-white">Position: Designer</p>
<p class="p-2 mb-3 bg-dark text-white">Phone: (222) 222-4444</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Dates: 2010 - 2013</h6>
</div>
</div>
</div>
</div>
</div>
<!-- Work -->
<div id="work" class="collapse">
<div class="card card-body bg-warning py-5 section-text">
<h1>My Portfolio</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, voluptates.
</p>
</div>
<div class="card card-body py-5">
<h3>What have I built?</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda necessitatibus explicabo officiis dolore.
</p>
<div class="row no-gutters">
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=788" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=788" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=789" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=789" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=790" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=790" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=791" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=791" class="img-fluid">
</a>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=796" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=796" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=793" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=793" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=794" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=794" class="img-fluid">
</a>
</div>
<div class="col-md-3">
<a href="https://picsum.photos/1200/768/?image=795" data-toggle="lightbox">
<img src="https://picsum.photos/600/?image=795" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div id="contact" class="collapse">
<div class="card card-body bg-danger text-white py-5 section-text">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
<div class="card card-body py-5 h3">
<h3>Get in touch</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque.</p>
<form>
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon bg-danger text-white">
<i class="fa fa-user"></i>
</span>
<input type="text" class="form-control bg-dark text-white" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon bg-danger text-white">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control bg-dark text-white" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon bg-danger text-white">
<i class="fa fa-pencil"></i>
</span>
<textarea class="form-control bg-dark text-white" placeholder="Message" rows="5"></textarea>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-danger btn-block btn-lg">
</form>
</div>
</div>
<!-- Footer -->
<footer id="main-footer" class="p-5 bg-dark text-white">
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-outline-light">
<i class="fa fa-cloud"></i>
Download Resume
</a>
</div>
</div>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typer.js"></script>
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
<script>
$(".port-item").click(function () {
$(".collapse").collapse("hide");
});
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
</body>
</html>
这是我的css文件：
body {
margin: 0;
padding: 0;
font-family: 'Ranga', cursive;
background: #2980b9 url('https://static.tumblr.com/03fbbc566b081016810402488936fbae/pqpk3dn/MRSmlzpj3/tumblr_static_bg3.png') repeat 0 0;
-webkit-animation: 10s linear 0s normal none infinite animate;
-moz-animation: 10s linear 0s normal none infinite animate;
-ms-animation: 10s linear 0s normal none infinite animate;
-o-animation: 10s linear 0s normal none infinite animate;
animation: 10s linear 0s normal none infinite animate;
}
@-webkit-keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: 500px 0;
}
}
@-moz-keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: 500px 0;
}
}
@-ms-keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: 500px 0;
}
}
@-o-keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: 500px 0;
}
}
@keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: 500px 0;
}
}
.collapse {
.card.section-text {
border: none;
margin: 0;
padding: 0;
h1 {
font-size: 50px !important;
}
}
}
#main-header {
.row.no-gutters {
width: 100%;
min-height: 320px;
.col-lg-3.col-md-4 {
min-height: 100%;
img {
width: 100%;
height: 100%;
}
}
.col-lg-9.col-md-8 {
.d-flex {
height: 100%;
#name {
flex-basis: 35%;
h1 {
padding-left: 30px;
font-size: 70px;
font-weight: 400;
}
.d-flex.flex-row {
flex: 1 0 40%;
a {
text-decoration: none;
color: white;
.fa {
font-size: 30px;
}
}
}
}
#title {
flex-basis: 30%;
background: black;
color: white;
padding: 0;
.display-4 {
font-size: 30px;
}
}
#actions {
display: flex;
flex-basis: 35%;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
.port-item {
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 25%;
border: none;
font-size: 20px;
.fa {
font-size: 2em;
}
}
.port-item:hover {
cursor: pointer;
}
}
}
}
}
}
@media (max-width: 1000px) {
#main-header {
.row {
.col-lg-9.col-md-8 {
#name {
.row {
.col-lg-7.col-md-6 {
h1 {
font-size: 30px;
}
}
}
}
}
}
}
}
@media (max-width: 770px) {
#main-header {
.row.no-gutters {
.col-lg-9.col-md-8 {
#name {
.row {
.col-lg-7.col-md-6 {
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 10px;
padding: 0;
}
}
.col-lg-5.col-md-6 {
.d-flex {
margin-bottom: 20px;
.fa {
font-size: 30px;
}
}
}
}
}
#actions {
.port-item {
padding: 40px 0;
}
}
}
}
}
}
@media (max-width: 500px) {
#main-header {
.row.no-gutters {
.col-lg-9.col-md-8 {
.d-flex {
#actions {
.port-item {
font-size: 3.5vw;
}
}
}
}
}
}
}
#main-footer {
.btn.btn-outline-light {
transition: color 0.3s;
}
.btn.btn-outline-light:hover {
color: black;
}
}
@media(min-width: 1199px) {
#actions {
.port-item {
padding: 3em !important;
}
}
}
我该如何解决这个问题？
这是因为您正在使用collapse类将样式应用于h1，并且在更改部分时此类出现/消失，以便在过渡期间删除样式。你需要摆脱这个类：
取而代之的是：
.collapse .card.section-text h1 {
font-size: 50px!important;
}
只需使用这个：
.card.section-text h1 {
font-size: 50px;
}
还有另一个元素具有相同的问题
所以你需要改变这个：
.collapse .card.section-text {
border: none;
margin: 0;
padding: 0;
}
简单地说：
.card.section-text {
border: none;
margin: 0;
padding: 0;
}