如何制作旋转木马占据整页宽度

时间:2015-12-31 03:24:38

标签: javascript jquery css twitter-bootstrap carousel

我从以下链接下载了一个轮播代码:view-source:http://ironsummitmedia.github.io/startbootstrap-full-slider/

我设法让它在一个简单的html页面中工作。但是,当我将代码复制/粘贴到我的网站页面时,我的任何一方都有差距,即轮播不占用页面的整个宽度。

我尝试在我的css中添加高度:100%,宽度100%,但它没有做到这一点。

下面的代码在其自己的页面中可以正常工作,但一旦添加到页面的其他元素,即导航和文本,就会出现间距问题。

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
   <!-- 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">
         <!-- Set the first background image using inline CSS below. -->
         <div class="fill"><img src="images/index1.jpg" img class="img-responsive center-block" width = "100%"></div>
         <div class="carousel-caption">
            <h2>#bebrown</h2>
         </div>
      </div>
      <div class="item">
         <!-- Set the second background image using inline CSS below. -->
         <div class="fill"><img src="images/index1.jpg" img class="img-responsive center-block" width = "100%"></div>
         <div class="carousel-caption">
            <h2>Caption 2</h2>
         </div>
      </div>
      <div class="item">
         <!-- Set the third background image using inline CSS below. -->
         <div class="fill"><img src="images/index1.jpg" img class="img-responsive center-block" width = "100%"></div>
         <div class="carousel-caption">
            <h2>Caption 3</h2>
         </div>
      </div>
   </div>
   <!-- Controls -->
   <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   <span class="icon-prev"></span>
   </a>
   <a class="right carousel-control" href="#myCarousel" data-slide="next">
   <span class="icon-next"></span>
   </a>
</header>
<!-- /.container -->

1 个答案:

答案 0 :(得分:0)

确保您的文档中包含以下内容,且doctype为HTML5

  *{
     box-sizing: border-box;
     /*add the other browsers here too*/
   }

   html, body{
      padding: 0;
      margin: 0;
   }

然后明显的图像宽度:100%等。

请参阅DEMO