使用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>
答案 0 :(得分：1)
我已经移动了css末尾的所有@media（最大宽度：480px）块，
将第445行更改为display：none;
将.logo-small {display：inline;}添加到您的@media（最大宽度：480px）
用这个改变你的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的回答。这只是获得所需内容的快捷方式。