我无法弄清楚为什么页面右侧会出现阴影。
有人可以告诉我我的代码有什么问题,以及如何让阴影消失?阴影与旋转木马的阴影相同" prev"和" next"箭头
感谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<title>Page Title</title>
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<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>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Wiredwiki</a>
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="" class="btn btn-info navbar-btn navbar-right">Download now</a>
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
<li><a href="#Gallery">Gallery</a>
<li><a href="#Features">Features</a>
<li><a href="#FAQ">FAQ</a>
<li><a href="#Contact">Contact</a>
</ul>
</div>
</div><!-- End container-->
</nav><!--End navbar-->
<!--Jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Wiredwiki App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. </p>
<div class="btn-group">
<a href="" class="btn btn-lg btn-info">Download App</a>
<a href="" class="btn btn-lg btn-default">Visit Store</a>
<a href="" class="btn btn-lg btn-info">Spread the word</a>
</div>
</div> <!--End container-->
</div><!--End Jumbotron-->
<div class="container" >
<section>
<div class="page-header" id="feedback">
<h2>Feedback. <small>Check out the awsome feedback</small></h2>
</div>
<div class="row">
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
</div><!-- End row -->
</section>
</div><!--End container-->
<!-- Call to action -->
<section>
<div class="well">
<div class="container text-center">
<h3> Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="Email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
</div> <!--End container-->
</div> <!--end well-->
</section> <!--End call to action-->
<!-- Gallery -->
<div class="container-fluid">
<div class="row">
<section>
<div class="container page-header" id="Gallery">
<h2>Gallery.<small> Check out the awsome gallery </small></h2>
</div>
<!-- Carousel -->
<div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
<li data-target="#screenshot-carousel" data-slide-to="1"></li>
<li data-target="#screenshot-carousel" data-slide-to="2"></li>
<li data-target="#screenshot-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://bit.ly/1JkGO3n">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://bit.ly/1Ld5r88">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://bit.ly/1HRXka8">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://bit.ly/1RBVsNz">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
</div> <!-- End Carousel inner -->
<!--arrow controls-->
<a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"
</a>
<a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
</a>
<!-- End arrow controls-->
</div> <!-- End Carousel -->
</section>
</div>
</div>
<!-- End Gallery -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分:1)
nav
li
未被</li>
关闭,您的轮播控件也未关闭:<span class="glyphicon glyphicon-chevron-left"
缺少> </span>
。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<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> <span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Wiredwiki</a>
</div>
<!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse"> <a href="" class="btn btn-info navbar-btn navbar-right">Download now</a>
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
</li>
<li><a href="#Gallery">Gallery</a>
</li>
<li><a href="#Features">Features</a>
</li>
<li><a href="#FAQ">FAQ</a>
</li>
<li><a href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
<!-- End container-->
</nav>
<!--End navbar-->
<!--Jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Wiredwiki App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="btn-group"> <a href="" class="btn btn-lg btn-info">Download App</a> <a href="" class="btn btn-lg btn-default">Visit Store</a> <a href="" class="btn btn-lg btn-info">Spread the word</a>
</div>
</div>
<!--End container-->
</div>
<!--End Jumbotron-->
<div class="container">
<section>
<div class="page-header" id="feedback">
<h2>Feedback. <small>Check out the awsome feedback</small></h2>
</div>
<div class="row">
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer>John Doe</footer>
</blockquote>
</div>
</div>
<!-- End row -->
</section>
</div>
<!--End container-->
<!-- Call to action -->
<section>
<div class="well">
<div class="container text-center">
<h3> Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="Email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
</div>
<!--End container-->
</div>
<!--end well-->
</section>
<!--End call to action-->
<!-- Gallery -->
<div class="container-fluid">
<div class="row">
<section>
<div class="container page-header" id="Gallery">
<h2>Gallery.<small> Check out the awsome gallery </small></h2>
</div>
<!-- Carousel -->
<div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
<li data-target="#screenshot-carousel" data-slide-to="1"></li>
<li data-target="#screenshot-carousel" data-slide-to="2"></li>
<li data-target="#screenshot-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1920x550/f00/fff">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x550/f00/fff">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x550/f00/fff">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x550/f00/fff">
<div class="carousel-caption">
<h3>Awsome caption</h3>
<p>Awsome caption for you to see</p>
</div>
</div>
</div>
<!-- End Carousel inner -->
<!--arrow controls-->
<a href="#screenshot-carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#screenshot-carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
<!-- End arrow controls-->
</div>
<!-- End Carousel -->
</section>
</div>
</div>
<!-- End Gallery -->