Question

我的网站出现问题，当我将屏幕尺寸设置得更小时，某些元素的样式消失了我试图删除一些链接，看看是不是我也经历了这个问题，我只是找不到问题如果你能帮助我，我会很感激。谢谢！

我的代码，我也发布了这个on 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

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

// Ternary operator
$err = empty($data['key']) ? "empty key" : '';
# -----------IF-----------------THEN ---- ELSE

// Ternary operator (nesting) (not recommended)
// Changing empty() to isset() you must rewrite the entire logic structure.
$err = empty($data) ? 'empty' : is_numeric($data) ? $data : 'not numeric';
# ---------IF--------- THEN -------ELSEIF-----------THEN-----ELSE

// Null Coalescing operator ?? available in PHP 7.
$err = $data['key'] ?? 'empty value';
# ---- IF ISSET USE --- ELSE value

// Nesting 
$err = $data['key'] ?? $_SESSION['key'] ?? $_COOKIE['key'] ?? 'no key';
#      IF ISSET USE -- IF ISSET USE ------ IF ISSET USE ------ELSE

如果您不希望它在网页宽度小于@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; }的情况下丢失其样式，则需要将您的.button课程移到媒体查询之外。

我的CSS样式消失了吗？

2 个答案: