Twitter bootstrap 3 如何让滚动间谍工作？
我不能让我的卷轴间谍工作，我已经尝试了一切，我做错了什么？我看了无数的例子，似乎都是正确的。这是整个文件，我想可能有一些冲突的cssTwitter bootstrap 3 如何让滚动间谍工作？,twitter-bootstrap-3,Twitter Bootstrap 3,我不能让我的卷轴间谍工作，我已经尝试了一切，我做错了什么？我看了无数的例子，似乎都是正确的。这是整个文件，我想可能有一些冲突的css <DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
<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>
TCS活动租赁
身体{
位置：相对位置；
}
jumbotron先生{
宽度：100%；
高度：自动；
}
琼伯伦先生{
利润上限：85px；
填充顶部：20px；
高度：550px；
背景图像：
网址(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);
背景大小：100%100%；
}
朱博龙h2{
颜色：白色；
边缘顶部：100px；
}
.导航条固定顶部{
最小高度：125px；
}
.导航栏标题{
高度：125px；
}
a、 navbar品牌{
高度：125px；
}
a、 导航栏品牌>img{
边缘顶部：-13px；
}
ul导航{
边缘顶部：60像素；
}
@介质（最大宽度：767px）{
.导航栏导航>李>a{
线高：20px；
填充顶部：10px；
垫底：10px；
}
div#bs-example-navbar-collapse-1{
边缘顶部：10px；
}
.导航栏切换{
边缘顶部：30px；
}
ul导航{
边缘顶部：10px；
}
切换导航
为特别活动行业服务
关于我们，请查看反馈
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失
无名氏
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失
无名氏
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失
无名氏
联系我们计划您的下一个活动
输入您的姓名和电子邮件
联系我们
电子邮件地址
联系我们
看看我们的画廊
活动租赁产品展示我们的租赁产品选择
这是标题
Lorem ipsum dolor sit amet，sed
这是标题
Lorem ipsum dolor sit amet，sed
这是标题
Lorem ipsum dolor sit amet，sed
这是标题
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳动和财产损失，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特
这是标题
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>