需要帮助使网站响应 #2

Question

大家！我目前正在为我的一个朋友做一些免费的工作，为我的作品集做出贡献并让我继续学习。

一切都很好，看起来很棒，但不幸的是，我在尝试使某些内容具有响应性时遇到了很多麻烦。我正在使用 Bootstrap 网格框架。

好的，这是我的 CSS

.footertext {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 15px;
  color: white;
  margin-left: 30px;
  opacity: 0.5;
  text-align: right;
}
.lastbox {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 19px;
  text-align: center;
}
.footer {
  background-size: cover;
  height: 105px;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
  margin-top: 100px;
  padding-top: 20px;
  padding-bottom: 20px;

}
.boxmain {
  background-color: white;
  width: 100%;
  height: 25em;
  background-size: cover;
  max-width: 100%;

}
.videocenter {
  text-align: center;
}
.video {
  padding-top: 1.875em;
  text-align: center;
}
.underh {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 22px;
  padding-top: 2.0625em;
  margin-left: 1.25em;
  max-width: 100%;
}
.heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 100;
  font-size: 49px;
}
.box1 {
  padding-top: 25px;
}
body {
  font-family: 'Oswald', sans-serif;
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  max-width: 100%;

}
.logo {
  display: block;
  width: 75%;
  height: 96%;
  margin: 0 auto;
  max-width: 100%;
}

/*-------------------------------------------------------*/
/* NAVBAR
/*-------------------------------------------------------*/

.navbar {
  margin-bottom: 0;
  border: none;
  min-height: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1200;
}

.navbar-nav {
  margin: 0;
  float: none;
  display: inline-block;
}

.navbar-nav > li > a {
  text-transform: uppercase;
  padding: 0 24px;
  line-height: 90px;
  color: #fff;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navigation-overlay {
  background-color: rgba(17, 17, 17, 0.5);
  width: 100%;
  line-height: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navigation-overlay.sticky {
  background: #000;
  background: rgba(0,0,0,0.8);
  visibility: visible;
  opacity: 0.75;
}

.navigation-overlay.sticky .navbar-nav > li > a,
.navigation-overlay.sticky .menu-socials li > a {
  line-height: 60px;
}

.navbar-header {
  width: 20%;
  padding-right: 15px;
}

.nav-wrap {
  width: 60%;
}

.menu-socials {
  width: 20%;
  float: right;
  padding: 0 15px;
}

.logo-container {
  padding: 0 15px;
  float: left;
}

.logo-wrap {
  display: table;
  width: 100%;
}

.logo-wrap > a {
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.logo-wrap.shrink > a {
  height: 60px;
}

.logo-wrap img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: 66px;
}

.logo-wrap.shrink img {
  height: 48px;
}

.navbar-collapse.in {
  overflow-x: hidden;
}

.navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-nav > .active > a:focus,
.navbar-nav > .active > a:hover,
.menu-socials li > a:hover {
  opacity: 1;
}

.navbar-collapse {
  padding: 0;
  border-top: none;
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover,
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: transparent;
  text-decoration: none;
  border-color: #f2f2f2;
}

@media (max-width: 991px) {
  .navigation-overlay,
  .navigation-overlay.sticky {
    background-color: rgba(17, 17, 17, 0.9);
  }
  .nav-wrap {
    width: 100%;
    padding: 0;
    min-height: 0;
  }
  .nav-type-1 .container-fluid {
    padding: 0 15px;
  }
  .navbar-header {
    width: 100%;
    padding-right: 0;
  }
  .logo-wrap img {
    height: 48px;
  }
  .logo-wrap > a {
    height: 60px;
  }
  .navbar-nav {
    width: 100%;
    padding: 40px 0;
  }
  .navigation-overlay.sticky .navbar-nav > li > a,
  .navigation-overlay .navbar-nav > li > a {
    padding: 10px 0;
    line-height: 30px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navigation-overlay sticky">
  <div class="container-fluid">
    <div class="row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- Logo -->
        <div class="logo-container">
          <div class="logo-wrap local-scroll shrink">
            <a href="#home">
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-8 col-xs-12 nav-wrap">
        <div class="collapse navbar-collapse text-center" id="navbar-collapse">
          <ul class="nav navbar-nav local-scroll text-center">
            <li class="active">
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#services">Team</a>
            </li>
            <li>
              <a href="#portfolio">Works</a>
            </li>
            <li>
              <a href="#about-us">Events</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- end col -->
    </div>
    <!-- end row -->
  </div>
  <!-- end container -->
</div>
<!-- end navigation -->
<img class="logo img-fluid" alt="Eye Of The Storm"src="logo.png">
<div class="boxmain">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6">
        <div class="video">
        </div>
        <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro%2Fvideos%2F638067739703491%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
      </div>
      <div class="col-xs-6">
        <p class="underh">Eye of the Storm Productions is an entertainment business dedicated to its involvement in the electronic music scene.
          We offer a large range of services to  the underground electronic music scene and pride ourselves on the work that we do.
          We offer our own selection of the best aspiring young DJs/Producers and photographers/cinematographers, as well as professionally run stage management solutions.
          We have also partnered with Fulcrum Designs and Staging, to bring you the best in stage design and construction.  Including custom shade sail installation and VJ services.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="footer">
    <div class="row">
      <div class="col-xs-6">
        <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
      </div>
      <div class="col-xs-6">
        <p class="footertext">Copyright © 2017 Eye Of The Storm Productions. All Rights Reserved.</p>
        <p class="footertext">Website developed by Charlie Fisher</p>
      </div>
    </div>
  </div>
</div>

我更专注于尝试使中间的白色背景和内容响应式谢谢！

Answer 1

试试这个。它将提高页面响应能力：

body{
  width:100%;
  margin:0;
  padding:0;
  max-width:100%;
}
.container-fluid,.row{
  width:100%;
  margin:0;
  padding:0;
  max-width:100%;
}
.footertext {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 15px;
  color: white;
  margin-left: 30px;
  opacity: 0.5;
  text-align: right;
}
.lastbox {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 19px;
  text-align: center;
}
.footer {
  background-size: cover;
  margin:0;
  padding:0;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
  padding:20px 0 10px 0;
}
.boxmain {
  background-color: white;
  width: 100%;
  min-height:32.7em;
  background-size: cover;
  max-width: 100%;
}
.videocenter {
  text-align: center;
}
.video {
  padding-top: 1.875em;
  text-align: center;
}
.underh {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 22px;
  padding-top: 2.0625em;
  margin-left: 1.25em;
  max-width: 100%;
}
.heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 100;
  font-size: 49px;
}
.box1 {
  padding-top: 25px;
}
body {
  font-family: 'Oswald', sans-serif;
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  max-width: 100%;

}
.logo {
  display: block;
  width: 75%;
  height: 96%;
  margin: 0 auto;
  max-width: 100%;
}

/*-------------------------------------------------------*/
/* NAVBAR
/*-------------------------------------------------------*/

.navbar {
  margin-bottom: 0;
  border: none;
  min-height: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1200;
}

.navbar-nav {
  margin: 0;
  float: none;
  display: inline-block;
}

.navbar-nav > li > a {
  text-transform: uppercase;
  padding: 0 24px;
  line-height: 90px;
  color: #fff;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navigation-overlay {
  background-color: rgba(17, 17, 17, 0.5);
  width: 100%;
  line-height: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navigation-overlay.sticky {
  background: #000;
  background: rgba(0,0,0,0.8);
  visibility: visible;
  opacity: 0.75;
}

.navigation-overlay.sticky .navbar-nav > li > a,
.navigation-overlay.sticky .menu-socials li > a {
  line-height: 60px;
}

.navbar-header {
  width: 20%;
  padding-right: 15px;
}

.nav-wrap {
  width: 60%;
}

.menu-socials {
  width: 20%;
  float: right;
  padding: 0 15px;
}

.logo-container {
  padding: 0 15px;
  float: left;
}

.logo-wrap {
  display: table;
  width: 100%;
}

.logo-wrap > a {
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.logo-wrap.shrink > a {
  height: 60px;
}

.logo-wrap img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: 66px;
}

.logo-wrap.shrink img {
  height: 48px;
}

.navbar-collapse.in {
  overflow-x: hidden;
}

.navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-nav > .active > a:focus,
.navbar-nav > .active > a:hover,
.menu-socials li > a:hover {
  opacity: 1;
}

.navbar-collapse {
  padding: 0;
  border-top: none;
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover,
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: transparent;
  text-decoration: none;
  border-color: #f2f2f2;
}

@media (max-width: 991px) {
  .navigation-overlay,
  .navigation-overlay.sticky {
    background-color: rgba(17, 17, 17, 0.9);
  }
  .nav-wrap {
    width: 100%;
    padding: 0;
    min-height: 0;
  }
  .nav-type-1 .container-fluid {
    padding: 0 15px;
  }
  .navbar-header {
    width: 100%;
    padding-right: 0;
  }
  .logo-wrap img {
    height: 48px;
  }
  .logo-wrap > a {
    height: 60px;
  }
  .navbar-nav {
    width: 100%;
    padding: 40px 0;
  }
  .navigation-overlay.sticky .navbar-nav > li > a,
  .navigation-overlay .navbar-nav > li > a {
    padding: 10px 0;
    line-height: 30px;
  }
}

div.video{
  width:80%;
  margin:0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="navigation-overlay sticky">
    <div class="container-fluid">
      <div class="row">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- Logo -->
          <div class="logo-container">
            <div class="logo-wrap local-scroll shrink">
              <a href="#home">
              </a>
            </div>
          </div>
        </div>
        <div class="col-md-8 col-xs-12 nav-wrap">
          <div class="collapse navbar-collapse text-center" id="navbar-collapse">
            <ul class="nav navbar-nav local-scroll text-center">
              <li class="active">
                <a href="#home">Home</a>
              </li>
              <li>
                <a href="#services">Team</a>
              </li>
              <li>
                <a href="#portfolio">Works</a>
              </li>
              <li>
                <a href="#about-us">Events</a>
              </li>
              <li>
                <a href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
  </div>
  <!-- end navigation -->
  <img class="logo img-fluid" alt="Eye Of The Storm"src="logo.png">
  <div class="boxmain">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
          <div class="video">
            <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro%2Fvideos%2F638067739703491%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
          </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
          <p class="underh">Eye of the Storm Productions is an entertainment business dedicated to its involvement in the electronic music scene.
            We offer a large range of services to  the underground electronic music scene and pride ourselves on the work that we do.
            We offer our own selection of the best aspiring young DJs/Producers and photographers/cinematographers, as well as professionally run stage management solutions.
            We have also partnered with Fulcrum Designs and Staging, to bring you the best in stage design and construction.  Including custom shade sail installation and VJ services.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="footer">
      <div class="row" class="footerRow">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <p class="footertext">Copyright © 2017 Eye Of The Storm Productions. All Rights Reserved.</p>
          <p class="footertext">Website developed by Charlie Fisher</p>
        </div>
      </div>
    </div>
  </div>

对于响应式导航，请参阅 bootstrap-navbar template。如果您在此页面上向下滚动 t=，则有预先编写的响应式导航代码。