display：none;在Responsive Bootstrap网站

时间：2015-09-01 00:41:40

标签： html css twitter-bootstrap css3

使用Bootstrap的响应式网站。标题中我有一个标记符号，我希望在481px和以上的尺寸上显示但我不希望这个大型徽标显示为480px＆amp;下方。

相反，我在行中有另一个列，我想要显示一个较小的徽标＆amp;在480px以下的任何屏幕上接管该行。问题似乎在于这个较小的标识。

如果我在@media (max-width: 767px)选择器上将我的CSS媒体查询display: none;设置为.logo-small，它就不会显示在767px以下的任何地方，即使我有@media (max-width: 480px) display: inline;用于此同一选择器。

提出问题的选择器称为：.logo-small，位于媒体查询的底部。

基本上，“LOGO LARGE”需要在480px以下消失，并且需要显示“LOGO SMALL”。

Here's a link以下内容：

@charset "UTF-8";
 h1,
h3,
p {
  text-align: center;
}
#main {
  width: 75%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
footer {
  margin-top: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #413535;
  color: #BCB8B8;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1px;
}
.topinfo {
  float: right;
  background-color: #403C3C;
  color: #73a014;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.topinfo-wrap {
  background-color: #403C3C;
  text-align: center;
  padding-right: 30px;
}
.topinfo-full {
  background-color: #403C3C;
  -webkit-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
}
.navbar.navbar-default {
  border-width: 0px;
  border-radius: 0px;
  background-color: #BFBFBF;
  margin-top: 0px;
  margin-bottom: 0px;
  -webkit-box-shadow: 0px 6px 10px 14px #212121;
  box-shadow: 0px 6px 10px 14px #212121;
}
#nav-container {
  background-color: #BFBFBF;
}
.image-fill {
  width: 100%;
}
#wrapper {
  padding-left: 0px;
  padding-right: 0px;
  background-image: url(../images/background_wood.jpg);
  background-position: center top;
}
.logo {
  background-color: #403C3C;
  float: left;
  padding-bottom: 15px;
  color: #B7B4B4;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 20px;
  display: inline;
}
#carousel1 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  height: auto;
  -webkit-box-shadow: 0px -3px 10px 0px #484848;
  box-shadow: 0px -3px 10px 0px #484848;
}
.thumb-cap {
  margin-top: 0px;
}
#brand {
  display: none;
}
#nav-home {
  font-size: 20px;
}
#nav-rooms {
  font-size: 20px;
}
#nav-restaurant {
  font-size: 20px;
}
#nav-bar {
  font-size: 20px;
}
#nav-gallery {
  font-size: 20px;
}
#nav-book {
  font-size: 20px;
}
.active-text {
  font-size: 20px;
}
.logo-sized {
  max-width: 250px;
  height: auto;
}
.toplogo {
  float: left;
  position: absolute;
  z-index: 10;
  padding-top: 0px;
  .maintext-large {
    text-align: center;
  }
  .main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 30px;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    color: #CFF879;
    text-decoration: none;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .logo-small {
    width: auto;
    background-color: #EB5053;
    display: inline;
    color: #F7F4F4;
    padding-top: 0px;
    padding-bottom: 0px;
    float: none;
    clear: none;
  }
  .logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
    display: inline;
  }
}
/* Portrait phones and smaller */

@media (max-width: 480px) {
  .topinfo-wrap {
    background-color: #403C3C;
    text-align: center;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .logo {
    background-color: #403C3C;
    float: left;
    padding-bottom: 15px;
    color: #B7B4B4;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 20px;
    display: none;
  }
  .topinfo-phone {
    float: none;
    padding-left: 15px;
    padding-right: 0px;
    text-align: right;
    display: none;
  }
  .topinfo-email {
    display: none;
  }
  #nav-home {
    font-size: 15px;
  }
  #nav-rooms {
    font-size: 15px;
  }
  #nav-restaurant {
    font-size: 15px;
  }
  #nav-bar {
    font-size: 15px;
  }
  #nav-gallery {
    font-size: 15px;
  }
  #nav-book {
    font-size: 15px;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .logo-sized {
    max-width: 235px;
    height: auto;
  }
  .maintext-large {
    text-align: center;
  }
  .nav-underslides {} .underslides-container {
    text-align: center;
    -webkit-box-shadow: 0 0;
    box-shadow: 0 0;
  }
  .underslides-wrapper {
    -webkit-box-shadow: 0px 5px 6px #000000;
    box-shadow: 0px 5px 6px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
  }
  .main-background {
    -webkit-box-shadow: 6px 6px 10px #2D2D2D;
    box-shadow: 6px 6px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 80px;
  }
  .slidestext-large {
    display: none;
  }
  .slidestext-small {
    display: none;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: center;
    padding-left: 0px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    color: #CFF879;
    text-decoration: none;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .active-text {
    font-size: 20px;
  }
  .copyright-full {
    background-color: #413535;
    -webkit-box-shadow: 0px 4px 19px #FFFFFF;
    box-shadow: 0px 4px 19px #FFFFFF;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .copyright-text {
    color: #EEEEEE;
    font-style: italic;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: normal;
  }
  .logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
    display: inline;
  }
}
/* Landscape phones and portrait tablets */

@media (max-width: 767px) {
  .topinfo-wrap {
    background-color: #403C3C;
    text-align: center;
    padding-right: 20px;
  }
  .topinfo-phone {
    float: right;
    padding-top: 0px;
    padding-right: 0px;
    text-align: right;
  }
  .topinfo-email {
    float: right;
    clear: none;
    padding-top: 0px;
    text-align: right;
    padding-right: 20px;
    display: none;
  }
  #brand {
    display: inline;
  }
  #nav-home {
    font-size: 15px;
  }
  #nav-rooms {
    font-size: 15px;
  }
  #nav-restaurant {
    font-size: 15px;
  }
  #nav-bar {
    font-size: 15px;
  }
  #nav-gallery {
    font-size: 15px;
  }
  #nav-book {
    font-size: 15px;
  }
  .toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
  }
  .maintext-large {
    text-align: center;
  }
  .slidestext-large {
    display: none;
  }
  .slidestext-small {
    display: none;
  }
  .main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
  }
  .underslides-wrapper {
    -webkit-box-shadow: 0px 5px 7px #000000;
    box-shadow: 0px 5px 7px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: center;
    padding-left: 0px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    color: #CFF879;
    text-decoration: none;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: none;
    display: inline;
  }
}
/* Portrait tablets and small desktops */

@media (min-width: 768px) and (max-width: 991px) {
  #nav-home {
    font-size: 15px;
  }
  #nav-rooms {
    font-size: 15px;
  }
  #nav-restaurant {
    font-size: 15px;
  }
  #nav-bar {
    font-size: 15px;
  }
  #nav-gallery {
    font-size: 15px;
  }
  #nav-book {
    font-size: 15px;
  }
  .active-text {
    font-size: 15px;
  }
  .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 20px;
  }
  .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 10px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
    color: #CFF879;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
  }
  .logo-sized {
    max-width: 250px;
    height: auto;
  }
  .maintext-large {
    text-align: center;
  }
  .main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 0px;
  }
  .underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .logo-small {
    width: auto;
    display: none;
    float: none;
    color: #F7F4F4;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
  }
}
/* Landscape tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1199px) {
  #nav-home {
    font-size: 20px;
  }
  #nav-rooms {
    font-size: 20px;
  }
  #nav-restaurant {
    font-size: 20px;
  }
  #nav-bar {
    font-size: 20px;
  }
  #nav-gallery {
    font-size: 20px;
  }
  #nav-book {
    font-size: 20px;
  }
  .active-text {
    font-size: 20px;
  }
  .toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
  }
  .logo-sized {
    max-width: 300px;
    height: auto;
  }
  .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 0px;
  }
  .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 30px;
  }
  .maintext-large {
    text-align: center;
  }
  .main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
  }
  .underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    color: #CFF879;
    text-decoration: none;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .logo-small {
    width: auto;
    background-color: #EB5053;
    display: none;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
  }
}
/* Large desktops and laptops */

@media (min-width: 1200px) {
  .carousel-text {
    display: inline;
  }
  #nav-home {
    font-size: 20px;
  }
  #nav-rooms {
    font-size: 20px;
  }
  #nav-restaurant {
    font-size: 20px;
  }
  #nav-bar {
    font-size: 20px;
  }
  #nav-gallery {
    font-size: 20px;
  }
  #nav-book {
    font-size: 20px;
  }
  .active-text {
    font-size: 20px;
  }
  .logo-sized {
    max-width: 350px;
    height: auto;
  }
  .toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
    margin-top: 0px;
  }
  .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 0px;
  }
  .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 0px;
  }
  a:link {
    color: #73a014;
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
    color: #CFF879;
  }
  a:visited {
    color: #73a014;
    text-decoration: none;
  }
  a:active {
    color: #73A014;
    text-decoration: none;
  }
  .maintext-large {
    text-align: center;
  }
  .main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 30px;
  }
  .footer-full {
    background-color: #413535;
  }
  .footer-phone {
    text-align: center;
  }
  .footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
  }
  .footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
  }
  .thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
  }
  .underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
  }
  .logo-small {
    width: auto;
    display: none;
    float: none;
    color: #F7F4F4;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="container-fluid" id="wrapper">
  <div class="container-fluid topinfo-full">
    <div class="container topinfo-wrap">
      <div class="row">
        <div class="col-lg-3 logo col-sm-4 col-xs-12">
          <div class="logotop toplogo">
            <img src="http://i.stack.imgur.com/D2TPh.png" alt="" width="306" height="187" class="logo-sized" />
          </div>
        </div>
        <div class="topinfo topinfo-phone col-xs-4 col-sm-3 col-lg-2 col-md-2">
          <img src="images/phone.png" width="32" height="32" alt="" />(800)555.5555</div>
        <div class="col-xs-5 col-sm-1 col-lg-1 col-md-1 logo-small">
          <img src="http://i.stack.imgur.com/KF77L.png" alt="" width="233" height="134" class="logotop-small" />
        </div>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

  1. 我已经移动了css末尾的所有@media（最大宽度：480px）块，

  2. 将第445行更改为display：none;

  3. 将.logo-small {display：inline;}添加到您的@media（最大宽度：480px）

    4. 用这个改变你的css：

        @charset "UTF-8";
h1, h3, p {
    text-align: center;
}
#main {
    width: 75%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
footer {
    margin-top: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: #413535;
    color: #BCB8B8;
    text-align: center;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 1px;
}
.topinfo {
    float: right;
    background-color: #403C3C;
    color: #73a014;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 16px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.topinfo-wrap {
    background-color: #403C3C;
    text-align: center;
    padding-right: 30px;
}
.topinfo-full {
    background-color: #403C3C;
    -webkit-box-shadow: 0px 0px 0px;
    box-shadow: 0px 0px 0px;
}
.navbar.navbar-default {
    border-width: 0px;
    border-radius: 0px;
    background-color: #BFBFBF;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-box-shadow: 0px 6px 10px 14px #212121;
    box-shadow: 0px 6px 10px 14px #212121;
}
#nav-container {
    background-color: #BFBFBF;
}
.image-fill {
    width: 100%;
}
#wrapper {
    padding-left: 0px;
    padding-right: 0px;
    background-image: url(../images/background_wood.jpg);
    background-position: center top;
}
.logo {
    background-color: #403C3C;
    float: left;
    padding-bottom: 15px;
    color: #B7B4B4;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 20px;
    display: inline;
}
#carousel1 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: auto;
    -webkit-box-shadow: 0px -3px 10px 0px #484848;
    box-shadow: 0px -3px 10px 0px #484848;
}
.thumb-cap {
    margin-top: 0px;
}
#brand {
    display: none;
}
#nav-home {
    font-size: 20px;
}
#nav-rooms {
    font-size: 20px;
}
#nav-restaurant {
    font-size: 20px;
}
#nav-bar {
    font-size: 20px;
}
#nav-gallery {
    font-size: 20px;
}
#nav-book {
    font-size: 20px;
}
.active-text {
    font-size: 20px;
}
.logo-sized {
    max-width: 250px;
    height: auto;
}
.toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
    .maintext-large {
    text-align: center;
}
.main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 30px;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    color: #CFF879;
    text-decoration: none;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.logo-small {
    width: auto;
    background-color: #EB5053;
    display: inline;
    color: #F7F4F4;
    padding-top: 0px;
    padding-bottom: 0px;
    float: none;
    clear: none;
}
.logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
    display: none;
}
}
/* Portrait phones and smaller */

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    .topinfo-wrap {
    background-color: #403C3C;
    text-align: center;
    padding-right: 20px;
}
    .topinfo-phone {
    float: right;
    padding-top: 0px;
    padding-right: 0px;
    text-align: right;
}
    .topinfo-email {
    float: right;
    clear: none;
    padding-top: 0px;
    text-align: right;
    padding-right: 20px;
    display: none;
}
#brand {
    display: inline;
}
#nav-home {
    font-size: 15px;
}
#nav-rooms {
    font-size: 15px;
}
#nav-restaurant {
    font-size: 15px;
}
#nav-bar {
    font-size: 15px;
}
#nav-gallery {
    font-size: 15px;
}
#nav-book {
    font-size: 15px;
}
.toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
}
.maintext-large {
    text-align: center;
}
.slidestext-large {
    display: none;
}
.slidestext-small {
    display: none;
}
.main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
}
.underslides-wrapper {
    -webkit-box-shadow: 0px 5px 7px #000000;
    box-shadow: 0px 5px 7px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: center;
    padding-left: 0px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    color: #CFF879;
    text-decoration: none;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: none;
    display: none;
}
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
#nav-home {
    font-size: 15px;
}
#nav-rooms {
    font-size: 15px;
}
#nav-restaurant {
    font-size: 15px;
}
#nav-bar {
    font-size: 15px;
}
#nav-gallery {
    font-size: 15px;
}
#nav-book {
    font-size: 15px;
}
.active-text {
    font-size: 15px;
}

    .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 20px;
}
    .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 10px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #CFF879;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
}
.logo-sized {
    max-width: 250px;
    height: auto;
}
.maintext-large {
    text-align: center;
}
.main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 0px;
}
.underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.logo-small {
    width: auto;
    display: none;
    float: none;
    color: #F7F4F4;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
}
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
#nav-home {
    font-size: 20px;
}
#nav-rooms {
    font-size: 20px;
}
#nav-restaurant {
    font-size: 20px;
}
#nav-bar {
    font-size: 20px;
}
#nav-gallery {
    font-size: 20px;
}
#nav-book {
    font-size: 20px;
}
.active-text {
    font-size: 20px;
}
.toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
}
.logo-sized {
    max-width: 300px;
    height: auto;
}
    .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 0px;
}
    .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 30px;
}
.maintext-large {
    text-align: center;
}
.main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
}
.underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    color: #CFF879;
    text-decoration: none;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.logo-small {
    width: auto;
    background-color: #EB5053;
    display: none;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
}
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
.carousel-text {
    display: inline;
}
#nav-home {
    font-size: 20px;
}
#nav-rooms {
    font-size: 20px;
}
#nav-restaurant {
    font-size: 20px;
}
#nav-bar {
    font-size: 20px;
}
#nav-gallery {
    font-size: 20px;
}
#nav-book {
    font-size: 20px;
}
.active-text {
    font-size: 20px;
}
.logo-sized {
    max-width: 350px;
    height: auto;
}
.toplogo {
    float: left;
    position: absolute;
    z-index: 10;
    padding-top: 0px;
    margin-top: 0px;
}
    .topinfo-phone {
    float: right;
    padding-top: 15px;
    text-align: right;
    padding-left: 0px;
}
    .topinfo-email {
    float: right;
    clear: none;
    padding-top: 15px;
    text-align: right;
    padding-right: 0px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #CFF879;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.maintext-large {
    text-align: center;
}
.main-background {
    -webkit-box-shadow: 6px 7px 10px #2D2D2D;
    box-shadow: 6px 7px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 30px;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: right;
    padding-right: 20px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: left;
    margin-left: 0px;
    padding-left: 20px;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.underslides-wrapper {
    -webkit-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
}
.logo-small {
    width: auto;
    display: none;
    float: none;
    color: #F7F4F4;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
}
}

@media (max-width: 480px) {
.logo-small {
    display: inline;
}
.topinfo-wrap {
    background-color: #403C3C;
    text-align: center;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.logo {
    background-color: #403C3C;
    float: left;
    padding-bottom: 15px;
    color: #B7B4B4;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 20px;
    display: none;
}
.topinfo-phone {
    float: none;
    padding-left: 15px;
    padding-right: 0px;
    text-align: right;
    display: none;
}
.topinfo-email {
    display: none;
}
#nav-home {
    font-size: 15px;
}
#nav-rooms {
    font-size: 15px;
}
#nav-restaurant {
    font-size: 15px;
}
#nav-bar {
    font-size: 15px;
}
#nav-gallery {
    font-size: 15px;
}
#nav-book {
    font-size: 15px;
}
.thumb-shadow {
    -webkit-box-shadow: 5px 5px 10px;
    box-shadow: 5px 5px 10px;
}
.logo-sized {
    max-width: 235px;
    height: auto;
}
.maintext-large {
    text-align: center;
}
.nav-underslides {
}
.underslides-container {
    text-align: center;
    -webkit-box-shadow: 0 0;
    box-shadow: 0 0;
}
.underslides-wrapper {
    -webkit-box-shadow: 0px 5px 6px #000000;
    box-shadow: 0px 5px 6px #000000;
    background-repeat: repeat-x;
    height: auto;
    background-color: #403C3C;
    text-align: center;
}
.main-background {
    -webkit-box-shadow: 6px 6px 10px #2D2D2D;
    box-shadow: 6px 6px 10px #2D2D2D;
    padding-left: 0px;
    padding-right: 0;
    background-image: url(../images/background2.jpg);
    padding-bottom: 80px;
}
.slidestext-large {
    display: none;
}
.slidestext-small {
    display: none;
}
.footer-full {
    background-color: #413535;
}
.footer-phone {
    text-align: center;
}
.footer-logo {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
}
.footer-socialmedia {
    text-align: center;
    padding-left: 0px;
}
a:link {
    color: #73a014;
    text-decoration: none;
}
a:hover {
    color: #CFF879;
    text-decoration: none;
}
a:visited {
    color: #73a014;
    text-decoration: none;
}
a:active {
    color: #73A014;
    text-decoration: none;
}
.active-text {
    font-size: 20px;
}
.copyright-full {
    background-color: #413535;
    -webkit-box-shadow: 0px 4px 19px #FFFFFF;
    box-shadow: 0px 4px 19px #FFFFFF;
    padding-top: 14px;
    padding-bottom: 14px;
}
.copyright-text {
    color: #EEEEEE;
    font-style: italic;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: normal;
}
.logo-small {
    width: auto;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    clear: both;
    display: inline;
}
}

答案 1 :(得分：0)

如果小图像高于481像素，则需要小图像消失。

hits

请按照MisterManSam或Dario的回答。这只是获得所需内容的快捷方式。

相关问题
最新问题