需要帮助使网站响应＃2

时间：2016-12-21 02:50:13

标签： html css twitter-bootstrap

大家好！我现在正在为我的一个朋友做一些免费工作，为我的投资组合做出贡献，让我继续学习。

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

好吧，这就是我的CSS

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我更多地试图让中间的白色背景和内容响应，谢谢你！

1 个答案:

答案 0 :(得分：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 =，则会有预先编写的响应式导航代码。

相关问题
最新问题