这次是我的轮播给我带来麻烦。这应该是正常的,但我不知道为什么它不起作用。我在以下网站上看到了这一点:http : //parkhurstdesign.com/improved-carousels-twitter-bootstrap/
这是我的codeply链接:http : //www.codeply.com/go/YPBXy1HmC8,这是我的html / css代码:
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime"><a href="#Anime">Anime</a></li>
<li class="Manga"><a href="#manga">Manga</a></li>
<li class="Jogos"><a href="#Jogos">Jogos</a></li>
<li class="Opiniao"><a href="#Opiniao">Opinião</a></li>
<li class="Outros">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Outros <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">AMV</a></li>
<li><a href="#">Cosplay</a></li>
<li><a href="#">Passatempos</a></li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
</div>
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div style="background:url(http://imageslgmr.lazygamer.netdna-cdn.com/2014/11/Naruto.jpg) center center;
background-size:cover;" class="slider-size">
<div class="carousel-caption">
<a href="anime_1.com"><h3>Anime_1</h3>
<p>Narutonaruto</p></a>
</div>
</div>
<div class="item">
<div style="background:url(http://images.akamai.steamusercontent.com/ugc/39731145643729554/AA0DFB3DDC16C2D344721953B646A8279AEBBA76/) center center;
background-size:cover;" class="slider-size">
<div class="carousel-caption">
<a href="Anime_2.com"><h3>Anime_2</h3>
<p>Jojo</p></a>
</div>
</div>
<div class="item">
<div style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSwP_YYK55JaX9g7R9pZqVertNoGNwpxCTDBpZhGiOcvTTa_Af) center center;
background-size:cover;" class="slider-size">
<div class="carousel-caption">
<a href="Anime_3.com"><h3>Anime_3</h3>
<p>One OUTS ONEOUTS</p></a>
</div>
</div>
<div class="item">
<div style="background:url(http://images7.alphacoders.com/302/302762.jpg) center center;
background-size:cover;" class="slider-size">
<div class="carousel-caption">
<a href="Anime_4.com"><h3>Anime_4</h3>
<p>P3P3P3P3P3</p></a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Content-->
<div class="container">
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>TESTESTSTESTSTSTSTESTSET</p>
<p>jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmae jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmajafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma</p>
<p class="lead">...</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<!--Footer-->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</div>
的CSS
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
overflow: auto;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code {
font-size: 80%;
}
.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%;
margin:0 auto; /* center your carousel if other than 100% */
}
您在其中缺少一些结束</div>
标记<div class="carousel-inner" role="listbox">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句