水平滚动

时间：2017-12-03 10:14:25

标签： jquery html css twitter-bootstrap-3

我有一个水平滚动，因为在一定宽度后页面右侧有空格。我无法解决这个问题。我猜它是旋转木马还是导致问题的身体模板。有人可以帮助我，我应该做什么，在哪里？另外我有一个.btn：hover不能在CSS中工作，我想更改默认按钮悬停样式，但我不知道如何，如果有人可以指出如何做到这一点＆＃ 39;我也很棒！

编辑：我已经意识到这也发生在我的其他页面上，所以它可能不是我的旋转木马，而是我的页脚或导航？

＆＃13;
＆＃13; 
@charset "UTF-8";

*{
	margin: 0;
}


.nopadding{

	padding: 0;
}


.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {

}

.thumbnails {
	position: relative;
	margin-top: 150px;
}

#myCarousel {
	width: 980px;
	height: 654px;
	bottom: 25px;
	margin: 0 auto;

}

.carousel-control {
	height: 600px;
}


.banner {
	background: url(../images/banner1.png) no-repeat top center;
	background-size: cover;
	width: 980px;
	height: 654px;
	left: 110px;
	bottom: 30px;
	background-size:100% auto;
	

}

.banner p {
	position: relative;
	font-size: 25px;
	color: #fff;
	top: 440px;
	left: 20px;

}

.banner h1 {
	position: relative;
	font-size: 50px;
	color: #fff;
	left: 20px;
	top: 420px;
}

.bodyimg {
  max-width: 100%;
}

.bodytext1 {
	color: #ff8300;
}

.bodytext2 {
	color: #ff8300;
	width: 160px;
	margin-top: 37px;
}

.bodytext3 {
	color: #ff8300;
	margin-top: 60px
}

.bodytext4 {
	color: #ff8300;
	margin-top: 60px
}

.socialpadding {
	padding: 0px 10px 0px 10px;
	position: relative;
}

.centersocial {
	margin: 0 auto;
	position: absolute;
}

.contactinfo {

  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}

/* Add a background color and some padding around the form */
.formarea {

  background:  url(../images/formbg.png) no-repeat ;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972; 
  border-color: #ff9300;
}

.btn:hover {
  background-color: #fff; 
  border-color: #ff9300;
  color: #ff8300;
}

.btn:onclick {
  background-color: #fff; 
  border-color: #ff9300;
  color: #ff8300;
}

.messageform {
  height: 50px;
}

.google-maps {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
        margin-top: 50px;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% ;
        height: 100% ;
    }

.foot {

	background: url(../images/footer.png) no-repeat bottom center;
	height: 50px;
 	margin: 100px auto 0 auto;
 	position: absolute;
 	left: 0;
  	right: 0;

 	
}


footer {
	position: relative;
	color: #fff;
	display: block;
	text-align: right;
	margin-right: 350px;
	margin-top: 30px;
	font-size: 10px;

	

}




@media only screen and (max-width: 768px) {

    #myCarousel.carousel {
    max-width:100%;
    width:100%;
    max-height: 100%;
    }

    .navbar { 
  background-image: none; 
  background-color: #ff8300; 
  } 

    .findus { 

  margin: 0 auto;
  } 

  .centersocial { 
  position: relative;
  left: 50%;
  transform: ;
  } 

  .bodytext4 { 
  text-align: center;
  width: 250px;
  margin: 100px auto 5px auto;
  } 

  .bodytext3 { 
  text-align: center;
  width: 250px;
  margin: 60px auto 5px auto;
  } 

  .foot { 
  background-image: none; 
  background-color: #ff8300; 
  } 
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" 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>
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
      <ul class="nav navbar-nav">
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navposition">
        <li class="navspace"><a href="index.html">Home</a></li>
        <li class="navspace"><a href="#">Menu</a></li>
        <li class="navspace"><a href="location.html">Location</a></li>
        <li class="navspace"><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div> <!-- /.navbar-collapse -->
    </div> <!-- /.container-fluid -->
  </nav>

  <div class="row">
    <div class="col-sm-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active banner">
      <p>10% off all pizzas
        <br>this weekend only</p>
      <h1>LIMITED TIME<br>ONLY</h1>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  </div>

  <div class="row thumbnails">
    <div class="col-sm-offset-1 col-sm-3">
      <img class="img-responsive center-block" src="images/bodyimg.png" alt="">
    </div>
    <div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
      <p class="bodytext1">
        Year 2004.<br><br>

        The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners, the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
      </p>
    </div>
    <div class="col-md-offset-1 col-md-3 hidden-xs">

      <p class="bodytext2">
        Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour life in all its delightful flavours.<br><br>

        Share moments of fun, energy and inspiration over hot pizzas and cool conversations!

      </p>

    </div>
  </div>

  <div class="row">
    <div class="col-sm-offset-1 col-sm-3">

      <p class="bodytext3">

          Check us out on our social media accounts or subscribe to our newsletter for the latest updates!

      </p>

      <div class="centersocial">

        <a href="#"><img class="socialpadding"src="images/email.png" alt=""><a>
        <a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding"src="images/insta.png" alt=""><a>
        <a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt=""><a>


      </div>

    </div>
    <div class="col-sm-offset-1 col-sm-3">

      <p class="bodytext4">
        Feel free to come explore our outlets

      </p>

      <a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt=""><a>


    </div>
  </div>

  
</div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

删除您在{em> @media断点 left: 50% .centersocial上声明的@media only screen and (max-width: 768px)属性，例如：

.centersocial {
  position: relative;
  /* left: 50%; remove this and consider alternatives which are responsive */
}

此外，在以下选择器上声明max-width: 100%：

.row, #myCarousel, .container {
    max-width: 100%;
}

＆＃13;
＆＃13; 
@charset "UTF-8";
* {
  margin: 0;
}

.nopadding {
  padding: 0;
}

.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {}

.thumbnails {
  position: relative;
  margin-top: 150px;
}

#myCarousel {
  width: 980px;
  height: 654px;
  bottom: 25px;
  margin: 0 auto;
}

.carousel-control {
  height: 600px;
}

.banner {
  background: url(../images/banner1.png) no-repeat top center;
  background-size: cover;
  width: 980px;
  height: 654px;
  left: 110px;
  bottom: 30px;
  background-size: 100% auto;
}

.banner p {
  position: relative;
  font-size: 25px;
  color: #fff;
  top: 440px;
  left: 20px;
}

.banner h1 {
  position: relative;
  font-size: 50px;
  color: #fff;
  left: 20px;
  top: 420px;
}

.bodyimg {
  max-width: 100%;
}

.bodytext1 {
  color: #ff8300;
}

.bodytext2 {
  color: #ff8300;
  width: 160px;
  margin-top: 37px;
}

.bodytext3 {
  color: #ff8300;
  margin-top: 60px
}

.bodytext4 {
  color: #ff8300;
  margin-top: 60px
}

.socialpadding {
  padding: 0px 10px 0px 10px;
  position: relative;
}

.centersocial {
  margin: 0 auto;
  position: absolute;
}

.contactinfo {
  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}


/* Add a background color and some padding around the form */

.formarea {
  background: url(../images/formbg.png) no-repeat;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972;
  border-color: #ff9300;
}

.btn:hover {
  background-color: #fff;
  border-color: #ff9300;
  color: #ff8300;
}

.btn:onclick {
  background-color: #fff;
  border-color: #ff9300;
  color: #ff8300;
}

.messageform {
  height: 50px;
}

.google-maps {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
  margin-top: 50px;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.foot {
  background: url(../images/footer.png) no-repeat bottom center;
  height: 50px;
  margin: 100px auto 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

footer {
  position: relative;
  color: #fff;
  display: block;
  text-align: right;
  margin-right: 350px;
  margin-top: 30px;
  font-size: 10px;
}

@media only screen and (max-width: 768px) {
  #myCarousel.carousel {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
  }
  .navbar {
    background-image: none;
    background-color: #ff8300;
  }
  .findus {
    margin: 0 auto;
  }
  .centersocial {
    position: relative;
  }
  .bodytext4 {
    text-align: center;
    width: 250px;
    margin: 100px auto 5px auto;
  }
  .bodytext3 {
    text-align: center;
    width: 250px;
    margin: 60px auto 5px auto;
  }
  .foot {
    background-image: none;
    background-color: #ff8300;
  }
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

/* additional */
* {
    box-sizing: border-box;
}

.row, #myCarousel, .container {
    max-width: 100%;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" 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>
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
        <ul class="nav navbar-nav navposition">
          <li class="navspace"><a href="index.html">Home</a></li>
          <li class="navspace"><a href="#">Menu</a></li>
          <li class="navspace"><a href="location.html">Location</a></li>
          <li class="navspace"><a href="contactus.html">Contact Us</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div class="row">
    <div class="col-sm-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active banner">
            <p>10% off all pizzas
              <br>this weekend only</p>
            <h1>LIMITED TIME<br>ONLY</h1>
          </div>

          <div class="item">
            <img src="chicago.jpg" alt="Chicago">
          </div>

          <div class="item">
            <img src="ny.jpg" alt="New York">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>

    <div class="row thumbnails">
      <div class="col-sm-offset-1 col-sm-3">
        <img class="img-responsive center-block" src="images/bodyimg.png" alt="">
      </div>
      <div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
        <p class="bodytext1">
          Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
          and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
          the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
        </p>
      </div>
      <div class="col-md-offset-1 col-md-3 hidden-xs">

        <p class="bodytext2">
          Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
          life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!

        </p>

      </div>
    </div>

    <div class="row">
      <div class="col-sm-offset-1 col-sm-3">

        <p class="bodytext3">

          Check us out on our social media accounts or subscribe to our newsletter for the latest updates!

        </p>

        <div class="centersocial">

          <a href="#"><img class="socialpadding" src="images/email.png" alt="">
            </a>
              <a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
                </a>
                  <a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
                    </a>


        </div>

      </div>
      <div class="col-sm-offset-1 col-sm-3">

        <p class="bodytext4">
          Feel free to come explore our outlets

        </p>

        <a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
          </a>


      </div>
    </div>


  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

不是设置某些元素的width，而是设置max-width并将width设置为100％。

  

max-width属性用于设置元素的最大宽度。   这可以防止width属性的值变得大于max-width。

例如，对于下一堂课，您应该应用max-width代替width：

 #myCarousel {
 max-width: 980px;
 width:100%;
 ......
 .....
}

和

 .banner {
  background: url(../images/banner1.png) no-repeat top center;
  background-size: cover;
  max-width: 980px;/*this would be applied only when the width of the user screen is bigger then 920px*/
  width:100%;/* once the user screen in equal or smaller then 980px the widht of the element would be 100%  */
  .......
  }

答案 2 :(得分：0)

一些建议：

  • 使用编辑器格式化您的HTML代码，它有助于指出一些错误
  • 提供代码的在线版本以帮助人们进行交互，目前您的代码需要bootstrap.min.css和botstrap.min.js，但没有提供版本。版本对于重现完全相同的情况非常重要
  • 提供图片或类似图片：logo，banner1.png，formbg.ng，mainnav.png，footer.png，chicago.png等...缺失，如果没有它们，我们无法确定是否有＆ ＃39;参与你的问题。 （您正在使用W3C示例，请指出）

问题：

  • HTML代码缺少div代码
  • Bootstrap版本未知（最新3.3.7？）
  • 某些id包含\ n（bs-example-navbar- \ ncollapse-1）
  • 某些</li>不存在<li>
  • 使用＆＃34; row＆＃34;在＆＃34;行＆＃34;类。请参考bootstrap以了解如何使用＆＃34; row＆＃34; div和＆＃34; col-xx-yy＆＃34; DIV。
    • 之前，您无法在行中使用行而无需指定col-xx-yy
  • 在文件末尾缺少</body></html>

关于宽度和滚动的问题：

  • css明确指定转盘宽度：#myCarousel { width: 980px;。它不适合自举媒体查询并获得滚动条，因为你有一个固定的宽度。

要解决此问题：

  • 尽可能使用100%宽度，它会坚持视口大小
  • 如果您希望为每种媒体指定特定尺寸，则使用媒体查询，因为您还指定了654px身高

或者只是坚持使用默认的Carrousel（因为你从W3C拿到这个例子）并且不要尝试为它设置特定的大小（h / w）。 Bootstrap已根据视口大小调整图像大小。只提供相同的图像尺寸。

相关问题
最新问题