Question

我使用HTML5，CSS3，JS和Bootstrap创建了简单的网站。我与jumbotron和img-responsive有冲突。当我最小化屏幕aprox。低于760，我看到div.jumbotron的两个壁纸，以及img-responsive。但我想只看到img-responsive。

我多次检查发生了什么，但我不知道。

有人可以查看代码。我将非常感激。

链接到此网站 - https://magdalena-dering.github.io/RWD-Coffee-Corner/

  /*BODY*/

body {
  background-color: #ffeee6;
  font-family: 'Mirza', cursive;
}


/*HEADER*/

#header-nav {
  background-color: #ffffff;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/logo.png') no-repeat;
  height: 120px;
  width: 318px;
  margin-top: 20px;
}

.navbar-brand {
  padding-top: 25px;
}

.navbar-brand a:focus,
.navbar-brand a:hover {
  text-decoration: none;
}

.navbar-brand h1 {
  /* Restaurant name */
  font-size: 1.8em;
  color: #4d0000;
  margin-left: 10px;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
  line-height: .75;
}

.navbar-brand span {
  font-size: 1em;
  color: #4d0000;
}

#nav-list a {
  font-size: 1.6em;
  color: #4d0000;
  text-shadow: 3px 3px 3px #ff9999;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #ffeee6;
  border: 1px solid #ffffff;
  box-shadow: 0 0 30px #ff9999;
}

#nav-list a:hover {
  background: #ffeee6;
  box-shadow: 3px 3px 3px #ff9999;
}

.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
  border: 1px solid #661400;
}

.navbar-header button.navbar-toggle {
  clear: both;
  margin-top: -30px;
}

.navbar-brand a:hover,
.navbar-brand a:focus {
  text-decoration: none;
}


/*HOME PAGE*/

.container .jumbotron {
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #4d1a00;
  padding: 0;
  border: 1px solid #ffffff;
}

#menu-tile,
#specials-tile,
#map-tile {
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  height: 280px;
  margin: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  object-position: center;
}

#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

#menu-tile {
  background: url('../images/menu.jpg') no-repeat;
  background-position: center;
  background-color: #ffccb3;
}

#specials-tile {
  background: url('../images/specials1.jpg') no-repeat;
  background-position: center;
  background-color: #ffccb3;
}

#menu-tile span,
#specials-tile span,
#map-tile span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.6em;
  color: #800000;
  background-color: #ffcccc;
  opacity: .7;
}


/* FOOTER */

.panel-footer {
  background-color: #ffffff;
  font-size: 1.2em;
  margin-top: 20px;
  margin-bottom: 20px;
}

.visible-xs {
  border-top: 1px solid #800000;
}

#hours span,
#address span,
#sentence span {
  color: #4d0000;
  text-align: center;
  text-shadow: 3px 3px 3px #ff9999;
  font-size: 1.3em;
}


/***********MENU SIDE*********/

.category-tile {
  position: relative;
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 0 auto 15px;
}

.category-tile span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.6em;
  color: #800000;
  background-color: #ffcccc;
  opacity: .7;
}

.category-tile:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

.category-tile+div {
  margin-bottom: 50px;
}

#menu-title {
  font-size: 1.8em;
  color: #4d0000;
  margin-left: 10px;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
  text-align: center;
}

span {
  font-size: 1.4em;
  text-align: center;
}

.text-center {
  margin-top: 0px;
  margin-bottom: 30px;
}


/***********COFFEE CATEGORY SIDE*********/

.coffee-position {
  position: relative;
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  overflow: hidden;
  width: 180px;
  height: 180px;
  margin: 0 auto 15px;
  margin-bottom: 120px;
}

.coffee-position:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

.coffee-position span {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 1.6em;
  color: #800000;
  background-color: #ffcccc;
  opacity: .7;
  width: 100%;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

.coffee-price {
  font-size: 1.2em;
  text-align: center;
  margin-top: -110px;
  margin-bottom: 20px;
}

.menu-item-tile .menu-item-price span {
  font-size: .6em;
}


/***********SWEETS CATEGORY SIDE*********/

.sweets-position {
  position: relative;
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  overflow: hidden;
  width: 230px;
  height: 230px;
  margin: 0 auto 15px;
}

.sweets-position:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

.sweets-position span {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 1.3em;
  color: #800000;
  background-color: #ffcccc;
  opacity: .7;
  width: 100%;
}

.sweet-price {
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 35px;
}


/***********SPECIALS SIDE*********/

.specials-tile {
  position: relative;
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  background: url('../images/bday.jpg') no-repeat;
}

.specials-tile2 {
  position: relative;
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  background: url('../images/catering.jpg') no-repeat;
}

.specials-tile:hover,
.specials-tile2:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

.specials-tile span,
.specials-tile2 span {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 1.6em;
  color: #800000;
  background-color: #ffcccc;
  opacity: .7;
  width: 100%;
}

h4 {
  color: #4d0000;
  margin-left: 10px;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
}

.text1,
.text2 {
  font-size: 1.3em;
  text-align: center;
  margin-top: 10px;
  position: relative;
  border: solid 1px #ffcccc;
  padding: 5px;
  background-color: #ffe6e6;
}

.text1 a {
  color: #4d0000;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
}

.text2 a {
  color: #4d0000;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
}


/***********CONTACT SIDE*********/

#map-contact {
  box-shadow: 0 0 30px #ff9999;
  border: 1px solid #ffffff;
  height: 250px;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  object-position: center;
}

#map-contact:hover {
  box-shadow: 3px 3px 3px #ff9999;
}

.head-text {
  color: #4d0000;
  text-shadow: 5px 5px 5px #ff9999;
  font-weight: bold;
  text-align: center;
  margin: 20px;
}

.contact-description {
  font-size: 1.3em;
  color: #4d0000;
  text-shadow: 3px 3px 3px #ff9999;
  font-weight: bold;
  text-align: center;
  margin: 30px;
}


}

/********** Large devices only **********/
@media (min-width: 1200px) {
  /* Header */
  
  #logo-img {
    background: url('../images/logo.png') no-repeat;
    height: 120px;
    width: 318px;
    margin-top: 20px;
  }
}
.container .jumbotron {
  background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
  height: 675px;
  box-shadow: 0 0 30px #ff9999;
}

}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  /* Header */
  #logo-img {
    background: url('../images/logo.png') no-repeat;
    height: 120px;
    width: 318px;
    margin-top: 20px;
  }
  /* Home Page */
  .container .jumbotron {
    background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
    height: 558px;
    box-shadow: 0 0 30px #ff9999;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  /* Header */
  #logo-img {
    background: url('../images/logo.png') no-repeat;
    height: 120px;
    width: 318px;
    margin-top: 20px;
    margin: 5px;
  }
  /* Home Page */
  .container .jumbotron {
    background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
    height: 432px;
    box-shadow: 0 0 30px #ff9999;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  /* Header */
  #nav-list a {
    color: #4d0000;
    text-shadow: 3px 3px 3px #ff9999;
    font-weight: bold;
    text-align: center;
    background-color: #ffeee6;
    border: 2px solid #ffffff;
    margin-top: 6px;
    margin-bottom: 3px;
  }
  .navbar-nav {
    margin: 0px;
    margin-top: 3px;
    margin-left: -3px;
  }
  .navbar-brand {
    padding-top: 10px;
  }
  .navbar-brand h1 {
    /* Restaurant name */
    
    padding-top: 10px;
    font-size: 5vw;
    /* 1vw = 1% of viewport width */
    
    margin-top: -10px;
  }
  #nav-list a {
    font-size: 4vw;
  }
  .navbar-brand span {
    font-size: 3vw;
    color: #4d0000;
  }
  /*Home Page*/
  #logo-img {
    background: url('../images/md.png') no-repeat;
    height: 76px;
    width: 210px;
  }
  .container .jumbotron {
    margin-top: 30px;
    padding: 0;
    box-shadow: 0 0 30px #ff9999;
  }
  /*Footer*/
  #menu-tile span,
  #specials-tile span,
  #map-tile span {
    font-size: vw;
  }
  .panel-footer {
    font-size: 3vw;
  }
  #hours span,
  #address span,
  #sentence span {
    font-size: 4vw;
  }
  /***********MENU SIDE*********/
  .category-tile span {
    font-size: 4vw;
  }
  #menu-title {
    font-size: 4vw;
  }
  span {
    font-size: 3vw;
  }
  /***********COFEE CATEGORY SIDE*********/
  .coffee-position span {
    font-size: 4vw;
  }
  .coffee-price {
    font-size: 4vw;
  }
  /***********SWEETS CATEGORY SIDE*********/
  .sweets-position span {
    font-size: 4vw;
  }
  .sweet-price {
    font-size: 4vw;
  }
  /***********SPECIALS SIDE*********/
  .specials-tile {
    background: url('../images/bday 200x200.jpg') no-repeat;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
  }
  .specials-tile2 {
    background: url('../images/catering 200x200.jpg') no-repeat;
    width: 200px;
    height: 200px;
  }
  .specials-tile span,
  .specials-tile2 span {
    font-size: 4vw;
  }
  .text1,
  .text2 {
    font-size: 3vw;
    margin: 15px;
  }
  .text-center span {
    font-size: 4vw;
  }
  /***********CONTACT SIDE*********/
  .head-text span {
    font-size: 4vw;
  }
}

/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
  /* Header */
  #nav-list a {
    color: #4d0000;
    text-shadow: 3px 3px 3px #ff9999;
    font-weight: bold;
    text-align: center;
    background-color: #ffeee6;
    border: 2px solid #ffffff;
    margin-top: 6px;
    margin-bottom: 3px;
  }
  .navbar-nav {
    margin: 0px;
    margin-top: 3px;
    margin-left: -3px;
  }
  .navbar-brand h1 {
    font-size: 6vw;
    margin-left: 10px;
  }
  #nav-list a {
    font-size: 5vw;
  }
  /*Home Page*/
  .container .jumbotron {
    margin-top: 30px;
    padding: 0;
    box-shadow: 0 0 30px #ff9999;
  }
  .navbar-brand span {
    font-size: 4vw;
    color: #4d0000;
  }
  #menu-tile span,
  #specials-tile span,
  #map-tile span {
    font-size: 5vw;
  }
  #logo-img {
    background: url('../images/sm.png') no-repeat;
  }
  /*Footer*/
  .panel-footer {
    font-size: 5vw;
  }
  #hours span,
  #address span,
  #sentence span {
    font-size: 6vw;
  }
  /***********MENU SIDE*********/
  .category-tile span {
    font-size: 6vw;
  }
  #menu-title {
    font-size: 6vw;
  }
  span {
    font-size: 5vw;
  }
  /***********COFEE CATEGORY SIDE*********/
  .coffee-position span {
    font-size: 6vw;
  }
  .coffee-price {
    font-size: 6vw;
  }
  /***********SWEETS CATEGORY SIDE*********/
  .sweets-position span {
    font-size: 7vw;
  }
  .sweet-price {
    font-size: 6vw;
  }
  /***********SPECIALS SIDE*********/
  .specials-tile {
    background: url('../images/bday 200x200.jpg') no-repeat;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
  }
  .specials-tile2 {
    background: url('../images/catering 200x200.jpg') no-repeat;
    width: 200px;
    height: 200px;
  }
  .specials-tile span,
  .specials-tile2 span {
    font-size: 6vw;
  }
  .text1,
  .text2 {
    font-size: 5vw;
    margin: 15px;
  }
  .text-center span {
    font-size: 5vw;
  }
  /***********CONTACT SIDE*********/
  .head-text span {
    font-size: 6vw;
  }
  /********** Super EXTRA (created by me) extra small devices Only :-)**********/
  @media (max-width: 423px) {
    /* Header */
    
    #nav-list a {
      color: #4d0000;
      text-shadow: 3px 3px 3px #ff9999;
      font-weight: bold;
      text-align: center;
      background-color: #ffeee6;
      border: 2px solid #ffffff;
      margin-top: 6px;
      margin-bottom: 3px;
    }
    
    .navbar-nav {
      margin: 0px;
      margin-top: 3px;
      margin-left: -3px;
    }
    
    .navbar-brand h1 {
      font-size: 7vw;
    }
    
    #nav-list a {
      font-size: 6vw;
    }
    
    #logo-img {
      background: url('../images/sm.png') no-repeat;
      width: 150px;
      height: 54px;
    }
    
    .navbar-brand span {
      font-size: 4vw;
      color: #4d0000;
    }
    /*Home Page*/
    
    .container .jumbotron {
      margin-top: 30px;
      padding: 0;
      box-shadow: 0 0 30px #ff9999;
    }
    
    #menu-tile span,
    #specials-tile span,
    #map-tile span {
      font-size: 5vw;
    }
    /*Footer*/
    
    .panel-footer {
      font-size: 5vw;
    }
    
    #hours span,
    #address span,
    #sentence span {
      font-size: 6vw;
    }
    /***********MENU SIDE*********/
    
    .category-tile span {
      font-size: 6vw;
    }
    
    #menu-title {
      font-size: 6vw;
    }
    
    span {
      font-size: 5vw;
    }
    /***********COFEE CATEGORY SIDE*********/
    
    .coffee-position span {
      font-size: 6vw;
    }
    
    .coffee-price {
      font-size: 5vw;
    }
    /***********SWEETS CATEGORY SIDE*********/
    
    .sweets-position span {
      font-size: 7vw;
    }
    
    .sweet-price {
      font-size: 5vw;
    }
    /***********SPECIALS SIDE*********/
    
    .specials-tile {
      background: url('../images/bday 200x200.jpg') no-repeat;
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
    }
    
    .specials-tile2 {
      background: url('../images/catering 200x200.jpg') no-repeat;
      width: 200px;
      height: 200px;
    }
    
    .specials-tile span,
    .specials-tile2 span {
      font-size: 6vw;
    }
    
    .text1,
    .text2 {
      font-size: 5vw;
      margin: 15px;
    }
    
    .text-center span {
      font-size: 5vw;
    }
    /***********CONTACT SIDE*********/
    
    .head-text span {
      font-size: 6vw;
    }
  }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>responsive design - coffee corner</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
            <div id="logo-img"></div>
          </a>
          <div class="navbar-brand">
            <a href="index.html">
              <h1>coffee corner</h1><span> Magdalena Dering  &copy;<br> RWD</span></a>
          </div>
          <button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        </div>
        <div id="collapsable-nav" class="collapse navbar-collapse">
          <ul id="nav-list" class="nav navbar-nav navbar-right">
            <li id="navMenuButton">
              <a href="menu.html " onclick="$dc.loadMenuCategories();">
                <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
            </li>
            <li>
              <a href="specials.html">
                <span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
            </li>
            <li>
              <a href="contact.html">
                <span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
            </li>
          </ul>
          <!-- #nav-list -->
        </div>
        <!-- .collapse .navbar-collapse -->
      </div>
      <!-- .container -->
    </nav>
    <!-- #header-nav -->
  </header>

  <div id="main-content" class="container">
    <div class="jumbotron">
      <img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
    </div>
  </div>
  <div class="row"></div>
  <div id="home-tiles" class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
      <a href="menu.html">
        <div id="menu-tile"><span>menu</span></div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <a href="specials.html">
        <div id="specials-tile"><span>specials</span></div>
      </a>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
      <a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/@40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
        <div id="map-tile">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
            width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
          <span>map</span>
        </div>

      </a>
    </div>
  </div>
  <!-- End of #home-tiles -->
  </div>
  <!-- End of #main content -->

  <footer class="panel-footer">
    <div class="container">
      <div class="row">
        <section id="hours" class="col-sm-4">
          <span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
          <hr class="visible-xs">
        </section>

        <section id="address" class="col-sm-4">
          <span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
          <hr class="visible-xs">
        </section>

        <section id="sentence" class="col-sm-4">
          <span><b>quots:</b><br></span><i>
      “Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
          <hr class="visible-xs">
        </section>
      </div>
    </div>
  </footer>

  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

最佳，鲇鱼

Answer 1

为没有网址和广告的760媒体添加背景高度100％到自定义样式css




@media (max-width: 767px) {
    .container .jumbotron {
        margin-top: 30px;
        padding: 0;
        box-shadow: 0 0 30px #ff9999;
        background: url('');
        height: 100%;
    }
}

冲突 - jumbotron与响应式img

1 个答案: