我的CSS样式消失了吗？

Question

当我缩小屏幕尺寸以使某些元素的样式消失时，我遇到了我的网站问题，我尝试删除一些链接以查看是否也是我遇到的问题，而我却找不到问题，如果无论如何可以帮助我，我将不胜感激。 谢谢！

我的代码，我也将其发布在codepen上 ：

我的CSS和HTML：

  body { width: 100%; height: 100%; font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background-color: #000; overflow:hidden; } html { width: 100%; height: 100%; } h2, h3, h4, h5, h6 { margin: 0 0 35px; text-transform: uppercase; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } .brand-heading { font-family: 'Lobster'; font-weight: bolder; } p { margin: 0 0 25px; font-size: 18px; line-height: 1.5; } @media(min-width:768px) { p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; } } a { color: #42dca3; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } a:hover, a:focus { text-decoration: none; color: #1d9b6c; } .light { font-weight: 400; } .navbar-custom { margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); text-transform: uppercase; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #000; } .navbar-custom .navbar-brand { font-weight: 700; } .navbar-custom .navbar-brand:focus { outline: 0; } .navbar-custom .navbar-brand .navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff; } .navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom .navbar-brand .navbar-toggle:active { outline: 0; } .navbar-custom a { color: #fff; } .navbar-custom .nav li a { -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .navbar-custom .nav li a:hover { outline: 0; color: rgba(255, 255, 255, .8); background-color: transparent; } .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { outline: 0; background-color: transparent; } .navbar-custom .nav li.active { outline: 0; } .navbar-custom .nav li.active a { background-color: rgba(255, 255, 255, .3); } .navbar-custom .nav li.active a:hover { color: #fff; } @media(min-width:768px) { .navbar-custom { padding: 20px 0; border-bottom: 0; letter-spacing: 1px; background: 0 0; -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; transition: background .5s ease-in-out, padding .5s ease-in-out; } .navbar-custom.top-nav-collapse { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); background: #000; } } .intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #fff; background: url(https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/gh-pages/img/intro-bg.jpg?raw=true) no-repeat bottom center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .intro .intro-body { display: table-cell; vertical-align: middle; } .intro .intro-body .brand-heading { font-size: 40px; } .intro .intro-body .intro-text { font-size: 18px; } @media(min-width:768px) { .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 100px; } .intro .intro-body .intro-text { font-size: 26px; } } .btn-circle { width: 70px; height: 70px; margin-top: 15px; padding: 7px 16px; border: 2px solid #fff; border-radius: 100%!important; font-size: 40px; color: #fff; background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .btn-circle:hover, .btn-circle:focus { outline: 0; color: #fff; background: rgba(255, 255, 255, .1); } .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; } .btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } .content-section { padding-top: 200px; } @media(min-width:767px) { .content-section { padding-top: 250px; } footer { position:relative; padding-bottom: 50px; } footer p { margin: 0; } #contact { height:90%; overflow:hidden; } .button { display: inline-block; white-space: nowrap; background-color: dodgerblue; padding: 0 2em; margin: 0.9em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: black; } .button:hover {color:black; box-shadow: 2px 2px 2px grey; transition:1s all ease-in;} body { webkit-tap-highlight-color: rgba(255, 255, 255, .2); } 

 <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title></title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel="stylesheet" type="text/css"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- Navigation --> <header> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="#page-top"> <span class="light">Magic</span> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#donate">Donate</a> </li> <li> <a class="page-scroll" href="#teachings">Teachings</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> </header> <!-- Contact Section --> <section id="contact" class="container content-section text-center"> <div class="row"> <div class="col-lg-12"> <h2>Contact</h2> <p>Feel free to email us if you have any questions, or to just say hello.</p> <a href="" class="button email">Send email</a> </div> </div> </section> <footer> <div class="container text-center"> <p>Copyright &copy; Magic 2016</p> </div> </footer> </body> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> </html> 

Answer 1

将按钮移到断点之外

Answer 2

您在谈论您的电子邮件按钮吗？

@media (min-width: 767px) <----------------------------
.button {
    display: inline-block;
    white-space: nowrap;
    background-color: dodgerblue;
    padding: 0 2em;
    margin: 0.9em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: black;
}

如果您不希望它在屏幕宽度小于767px丢失样式，则需要将.button类移到媒体查询之外。