我正在使用这个：
我希望滑块占据页面的整个宽度。我意识到图像的大小与其显示的大小相同，但每张幻灯片都包含在一个标签中。如果我删除父容器，那么每个图像都会占用整个宽度，但在最后一张幻灯片的末尾，整个滑块会消失，3 秒后它会再次开始。
我怎样才能做到这一点？
我想让它看起来像这样：http: //twitter.github.com/bootstrap/examples/carousel.html#
除了在我的示例中，标题导航覆盖了顶部，然后下面的图像采用了页面的宽度。
问问题
9522 次
2 回答
3
挖掘源代码后，您可能会看到他们是如何做到的。他们使用了一个自定义的 CSS 片段，我将其粘贴在下面。之后，将导航栏放在一个类为 navbar-wrapper 的 div 中，粘贴导航栏，然后关闭 div。将 carousel 放在一个带有 carousel 和 slide 类的 div 中，并放置一个您选择的 id。下面的示例代码和 CSS。
轮播代码
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="../assets/img/examples/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item active">
<img src="../assets/img/examples/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="../assets/img/examples/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
CSS 代码
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .span4 {
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .span4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
</style>
导航栏代码
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div>
上面的代码不是我写的。这是一个示例模板的参考。
于 2013-03-02T04:55:47.990 回答
0
尝试将此添加到您的css代码中：
.carousel-caption {
top: 30%;
}
您可以更改30%为您喜欢的任何百分比，使标题垂直居中。
于 2013-06-09T02:43:47.340 回答