我无法让我的卷轴间谍工作，我已经尝试了一切，我做错了什么？我看过无数的例子，似乎一切都正确。这是整个文件，我想可能有一些冲突的CSS？
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TCS Event Rentals</title>
<!-- Latest compiled and minified CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {
position: relative;
}
.jumbotron img {
width: 100%;
height: auto;
}
.jumbotron {
margin-top: 85px;
padding-top: 20px;
height: 550px;
background-image:
url(https://thumb1.shutterstock.com/display_pic_with_logo/1447/98829743/stock-photo-wedding-tent-set-up-for-an-outdoor-wedding-or-other-event-chairs-set-up-for-an-outdoor-ceremony-98829743.jpg);
background-size: 100% 100%;
}
.jumbotron h2 {
color: white;
margin-top: 100px;
}
.navbar-fixed-top {
min-height: 125px;
}
.navbar-header {
height: 125px;
}
a.navbar-brand {
height: 125px;
}
a.navbar-brand > img {
margin-top: -13px;
}
ul.nav {
margin-top: 60px;
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
div#bs-example-navbar-collapse-1 {
margin-top: 10px;
}
.navbar-toggle {
margin-top: 30px;
}
ul.nav {
margin-top: 10px;
}
</style>
</head>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- <a href="#contact" class="btn btn-primary navbar-btn navbar-right">Contact Us</a> -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutus">About Us</a></li>
<li><a href="#eventrental">Event Rental Products</a></li>
<li><a href="#eventserved">Events Served</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- End Navbar -->
<!-- Jumbotron -->
<div class="Jumbotron">
<div class="container text-center">
<!--<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQNHBdJdFb6Chukad-YBtL4RXRY0uyR_TI5-hvVYuIHZjQwZB-j" class="img-responsive" alt="Responsive image"> -->
<h2>Serving the Special Events Industry</h2>
<div class="btn-group">
<a href="#gallery" class="btn btn-lg btn-primary">View Our Gallery</a>
</div>
</div><!-- End Container -->
</div><!-- End Jumbotron -->
<div class="container">
<section>
<div class="page-header" id="aboutus">
<h2>About Us<small> Check out the feedback</small></h2>
</div>
<div class="row">
<div class="col-lg-4">
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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>Contact Us to plan your next event</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label form="subscription">Contact Us</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label form="email">Email Address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-primary">Contact Us</button>
<hr>
</form>
</div><!--end container -->
</div><!-- end well -->
</section><!-- end Call to action -->
<!-- Gallery -->
<div class="container">
<section>
<div class="page-header" id="gallery">
<h2>Gallery<small> Check out our Gallery</small></h2>
</div>
<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="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image">
</div>
<div class="item">
<img src="https://partytimerental.com/wp-content/uploads/2013/12/100-Wide-Century-Tent-Rocky-Mountains-CO-View-5.x30701.jpg" alt="text of image">
</div>
<div class="item">
<img src="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image">
</div>
<div class="item">
<img src="https://partytimerental.com/wp-content/uploads/2013/12/100-x-380-Century-Tent-Denver-View-3.x30701.jpg" alt="text of image">
</div>
</div><!-- End Carousel Inner -->
<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>
</div><!-- end carousel -->
</section>
</div>
<!-- Event Rental Products -->
<div class="container">
<section>
<div class="page-header" id="eventrental">
<h2>Event Rental Products<small>Browse our selection of rental products</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-lg-8">
<h3>This is the heading</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
</div>
<div class="col-lg-4">
<img src="img/imac.jpg" class="img-responsive" alt="image">
</div>
</div><!-- End Row -->
<div class="row">
<div class="col-lg-8">
<h3>This is the heading</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
</div>
<div class="col-lg-4">
<img src="https://s3.amazonaws.com/homestratosphere/wp-content/uploads/2014/07/5Way-AccentChairs100.jpg" class="img-responsive" alt="image">
</div>
</div><!-- End Row -->
<div class="row">
<div class="col-lg-8">
<h3>This is the heading</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
</div>
<div class="col-lg-4">
<img src="http://target.scene7.com/is/image/Target/16513837?wid=360&hei=360&qlt=80&fmt=pjpeg" class="img-responsive" alt="image">
</div>
</div><!-- End Row -->
<hr>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-ok"></span>
<h4>This is the heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-cutlery"></span>
<h4>This is the heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-leaf"></span>
<h4>This is the heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
</div><!-- End Row -->
</section>
</div><!-- End Container -->
<!-- Events Served -->
<div class="container">
<section>
<div class="page-header" id="eventserved">
<h2>Events Served<small>Past events we served</small></h2>
</div><!-- End Page Header -->
</section>
</div><!-- End Container -->
<!-- Contact -->
<div class="container">
<section>
<div class="page-header" id="contact">
<h2>Contact Us<small>Contact us for more</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-lg-4">
<p>Send us a message, or contact us from the address below</p>
<address>
<strong>TCS Event Rentals</strong></br>
Lear Dr</br>
Burlington, NC 27310</br>
P: 1-800-888-8888
</address>
</div>
<div class="col-lg-8">
<form action="" class="form-horizontal">
<div class="form-group">
<label for="user-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-name" placeholder="Enter your Name">
</div>
</div><!-- End Form Group -->
<div class="form-group">
<label for="user-email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-email" placeholder="Enter your Email Address">
</div>
</div><!-- End Form Group -->
<div class="form-group">
<label for="user-url" class="col-lg-2 control-label">Your Website</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-url" placeholder="If you have any">
</div>
</div><!-- End Form Group -->
<div class="form-group">
<label for="user-message" class="col-lg-2 control-label">Any Message</label>
<div class="col-lg-10">
<textarea name="user-message" id="user-message" class="form-control" cols="20" rows="10" placeholder="Enter your Message"></textarea>
</div>
</div><!-- End Form Group -->
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div><!-- End Row -->
</section>
</div><!-- End Container -->
<!-- Footer -->
<footer>
<hr>
<div class="container text-center">
<h3>Contact Us to plan your next event</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label form="subscription">Contact Us</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label form="email">Email Address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-primary">Contact Us</button>
</form>
<hr>
<ul class="list-inline">
<li><a href="http://www.twitter.com/slmwebdesignco">Twitter</a></li>
<li><a href="http://www.twitter.com/slmwebdesignco">Facebook</a></li>
<li><a href="http://www.twitter.com/slmwebdesignco">Youtube</a></li>
</ul>
<p>©Copyright 2017</p>
</div><!--end container -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
需要相对定位：具有data-spy =“scroll”的元素需要CSS position属性，值为“relative”才能正常工作。
body {
position: relative;
}
它只是为相应的哈希添加内容，并调整窗口高度以便查看它。
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<!-- <a href="#contact" class="btn btn-primary navbar-btn navbar-right">Contact Us</a> -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutus">About Us</a></li>
<li><a href="#eventrental">Event Rental Products</a></li>
<li><a href="#eventserved">Events Served</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- End Navbar -->
<div id="aboutus" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="eventrental" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="eventserved" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="gallery" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
答案 1 :(得分：0)
我终于通过更多研究发现了解决方案，我只需添加css：height：100％;到身体元素。现在一切都很完美。