Bootstrap旋转木马箭头阴影采取整个右侧

时间:2015-07-16 19:40:49

标签: twitter-bootstrap carousel

我无法弄清楚为什么页面右侧会出现阴影。

有人可以告诉我我的代码有什么问题,以及如何让阴影消失?阴影与旋转木马的阴影相同" 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>

1 个答案:

答案 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 -->