twitter-bootstrap 循环浏览 bootstrap 3 jumbotron 的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24967616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cycle through background image of bootstrap 3 jumbotron
提问by user3382063
I'm trying to get 3 images to cycle through as backgrounds for a Bootstrap 3 jumbotron. But the problem is that I have 3 divs within the jumbotron and all the solution i've tried so far requires me to change the position of the jumbotron to relative and the background images to absolute. And because I'm trying to keep the site responsive, doing so severely messes up the look at smaller scales.
我正在尝试让 3 个图像循环作为 Bootstrap 3 jumbotron 的背景。但问题是我在 jumbotron 中有 3 个 div，到目前为止我尝试过的所有解决方案都要求我将 jumbotron 的位置更改为相对位置，将背景图像更改为绝对位置。而且因为我试图保持网站的响应性，这样做会严重破坏较小规模的外观。
I've also tried placing the jumbotron over a carousel by making the jumbotron absolute and carousel relative. The same scaling problem happens again at smaller screen sizes.
我还尝试通过使大屏幕绝对和旋转木马相对，将大屏幕放置在旋转木马上。同样的缩放问题在较小的屏幕尺寸下再次发生。
Is there an easy way to do this?
是否有捷径可寻？
EDIT: I want my background to change similar to this site: http://www.in-toronto-web-design.ca/and have it scale properly as well.
编辑：我希望我的背景改变类似于这个网站：http: //www.in-toronto-web-design.ca/并让它正确缩放。
my code:
我的代码：
<!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
<!--navigation bar-->
<div class="row">
<nav class="navbar navbar-default transparent" id="navbar-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
</button>
</div>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav nav-stacked main-nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
<hr>
</div>
</nav>
</div>
<!--end nav bar-->
<h1>Heading</h1>
<div class="container">
<p>Content</p>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-dollar fa-2x"></span>Button1
</a>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-check fa-2x"></span>Button2
</a>
</div>
</div>
<!--end jumbotron-top-->
回答by jme11
Rather than recreate what is essentially a carousel, I suggest just using the built in carousel and modifying it to behave the way you want.
与其重新创建本质上是轮播的内容，我建议只使用内置的轮播并对其进行修改以使其按您想要的方式运行。
Here's how I would do this:
这是我将如何做到这一点：
Bootply Demo
Bootply演示
HTML:
HTML：
<body>
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> <b>Menu</b>
</button>
<a class="navbar-brand" href="#">Your Brand</a>
</div>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--end nav bar-->
<!--begin bg-carousel-->
<div id="bg-fade-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="slide1"></div>
</div>
<div class="item">
<div class="slide2"></div>
</div>
<div class="item">
<div class="slide3"></div>
</div>
</div><!-- .carousel-inner -->
<div class="container carousel-overlay text-center">
<h1>Get Kittens Free All Week Long</h1>
<p class="lead">Special orders also available upon request. Check out our pricing.</p>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-dollar"></span> Get Pricing
</a>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-check"></span> Sign Up
</a>
</div>
</div><!-- .carousel -->
<!--end bg-carousel-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Your other page content here...</p>
</div><!--/.col -->
</div><!--/.row -->
</div><!--/.container -->
<!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
CSS:
CSS：
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.navbar-default.transparent {
background-color: transparent;
}
.slide1, .slide2, .slide3 {
min-height: 560px;
background-size: cover;
background-position: center center;
}
.slide1 {
background-image: url(http://placekitten.com/1000/300);
}
.slide2 {
background-image: url(http://placekitten.com/1100/300);
}
.slide3 {
background-image: url(http://placekitten.com/1200/300);
}
/* Carousel Fade Effect */
.carousel.carousel-fade .item {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
opacity: .5;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel-overlay {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
You didn't post your css, so I had to make some assumptions about what you were trying to accomplish. For example, instead of having the navigation "inside" the jumbotron area, I placed it at the top of the page and gave it an absolute positioning so it would appear as though the nav was on top of the carousel background.
你没有发布你的 css，所以我不得不对你想要完成的事情做一些假设。例如，我没有将导航置于超大屏幕区域“内部”，而是将其放置在页面顶部并为其提供绝对定位，这样它看起来就好像导航位于轮播背景的顶部一样。
You'll probably also want to tweak the carousel-overlay positioning based on your content, as well as adjust the height of the carousel itself, by setting the min-height of the .slide*x* classes. I would also use media queries to adapt the min-height based on the the viewport height.
您可能还想根据您的内容调整 carousel-overlay 定位，并通过设置 .slide*x* 类的 min-height 来调整 carousel 本身的高度。我还将使用媒体查询根据视口高度调整最小高度。
