我从以下链接下载了一个轮播代码: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 -->
答案 0 :(得分:0)
确保您的文档中包含以下内容,且doctype为HTML5
*{
box-sizing: border-box;
/*add the other browsers here too*/
}
html, body{
padding: 0;
margin: 0;
}
然后明显的图像宽度:100%等。
请参阅DEMO