Question

一直试图解决这个问题，无法让它运转起来。按照Tutsme上的教程，没有运气。

这是我的代码 - 使用bootstrap;

#body {
  padding-top: 50px;
  position: relative;
}

#header {
  padding: 10px;
}

.navbar {
  background: #fff;
}

.navbar #nav.navbar-nav.navbar-right {
  padding: 10px;
}

.navbar #nav.navbar-nav.navbar-right a {
  color: black;
}

.navbar #nav.navbar-nav.navbar-right > .active > a {
  color: white;
  background-color: #E74C3C;
}

.navbar #nav.navbar-nav.navbar-right > li> a:hover {
  color: white;
  background-color: #E74C3C;
}

#about {
  background-color: #f0f0f0;
}

.container.about img {
  padding: 20px;
}

.portfolio {
  padding-bottom: 20px;
}

.caption {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
}

#contact {
  background-color: #f0f0f0;
}

.contact-message {
  width: 700px;
}

form {
  display: inline-block;
  text-align: center;
}

input[type=text] {
  width: 600px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #E74C3C;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}

#text-area {
  width: 100%;
  height: 100px;
  width: 600px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #E74C3C;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

#submit {
  background-color: #E74C3C;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

label {
  display: inline-block;
  width: 140px;
  text-align: left;
}

a {
  color: #E74C3C;
}

<body id="body">

  <header id="home">
    <div class="navbar navbar-fixed-top">
      <div class="container" style="width: auto;">
        <div class="nav-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right" id="nav">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
  </header>

  <!--Navigation Bar Finishes Here -->

  <!--About Section Starts Here-->

  <div class="jumbotron">
    <div class="container about" id="about" data-spy="scroll" data-target="#nav">
      <div class="profile-picture">
        <img class="img-circle" src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_resize_me.jpg" style="float:left">
      </div>
      <div class="about-content">
        <h2>About</h2>
        <p>Hi! I'm Jamie and I'm an application bug-tester based in Hong Kong. I'm an avid traveler with the goal of always traveling more countries than my age. I have an entrepreneurial spirit and always love to hear about peoples game changing ideas.</p>
        <p>I'm a firm believer that learning doesn't stop after the standard education, so I've been teaching myself web development through online resources such as Free Code Camp & Code Academy with the hopes of becoming a front end developer in the future.</p>
      </div>
    </div>
  </div>

  <!--About Section Ends Here-->

  <!--Portfolio Section Starts Here-->
  <div class="portfolio1" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <h2 class="text-center">Portfolio</h2>
          <hr></hr>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming soon...</h4>
              <p>Coming soon...</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming Soon...</h4>
              <p>Coming Soon...</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming Soon...</h4>
              <p>Coming Soon... </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming Soon...</h4>
              <p>Coming Soon...</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming Soon...</h4>
              <p>Coming Soon...</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="http://www.teachingtravel.com/wp-content/uploads/2016/07/rsz_1coming-soon-placeholder.jpg" alt="Coming Soon">
            <div class="caption">
              <h4>Coming Soon...</h4>
              <p>Coming Soon...</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <!--Portfolio Section Ends Here-->

  <!--Contact Section Starts Here-->

  <div class="container-fluid" id="contact" align="center">
    <h2>Contact</h2>
    <p class="contact-message">Thank you for your interest in my work. Please get in touch with me by emailing <a href="mailto:contact@jamie.com">contact@jamie.com</a> or via social media. Alternatively please complete the form below and I’ll get back to you as soon as possible.</p>
    <form action="https://formspree.io/contact@jamie.com<" method="POST" class="signup-form">

      <div align="left"><label for="email">E-mail</label>
        <div class="email"><input type="text" name="email" placeholder="Email"></div>

        <label for="fname">Full Name</label>
        <div class="full-name"><input type="text" name="name" placeholder="Full Name" id="fullname"></div>

        <label for="textarea">Your Message</label>
        <div class="text-area"><textarea type="textarea" name="textarea" value="Whats Your Message?" id="text-area"></textarea>

          <div class="submit"><input type="submit" value="Submit" id="submit"></div>
        </div>
    </form>
    </div>
  </div>
  <!--Contact Section Ends Here-->
 
 <!--Footer Section Starts Here-->
 
 <footer> 
  
  </footer>  
 <!--Footer Section Ends Here-->
  
</body>

感谢您的帮助。这是值得赞赏的，所以我不需要把头发撕掉。

Answer 1

这是一个有效的例子：

<!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title></title>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
      <style type="text/css">
        .navbar{
          background: #000;
        }
      </style>
    </head>
    <body data-spy="scroll" data-target=".navbar" id="home" data-offset="115">
      <nav class="navbar navbar-dark nav-color navbar-fixed-top navbar-collapse">
        <div class="container">
          <div id="menu" class="col-xs-12">
            <ul class="nav navbar-nav">
              <li class="nav-item">
                <a data-smooth="smooth" class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a data-smooth="smooth" class="nav-link" href="#speakers">Speakers</a>
              </li>
              <li class="nav-item">
                <a data-smooth="smooth" class="nav-link" href="#schedule">Schedule</a>
              </li>
              <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="#"><img src="http://placehold.it/150x35"></a>
            </ul>
          </div>
        </div>
      </nav><!-- /.navbar -->
        <div class="banner">
        <div class="jumbotron jumbotron-fluid bg-info text-xs-center">
          <div class="container">
            <h1 class="display-2">Location</h1>
            <h1 class="display-4">Online Event</h1>
            <p class="lead m-t-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. </p>
            <div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn register-now btn-lg text-xs-center" data-toggle="modal" data-target="#register">Register Now</button>
              <a data-smooth="smooth" class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
            </div>
          </div>
        </div>  
      </div>
      <div class="container">
      <section>
        <div id="speakers" class="row">
          <div class="card-deck-wrapper m-b-2">
            <div class="card-deck">
              <div class="col-md-6 p-l-0 p-r-0">
                <div class="card">
                <img class="card-img-top img-fluid" src="http://placehold.it/550x250" alt="Card image cap">
                <div class="card-block">
                  <h4 class="card-title">Duis aute</h4>
                  <p class="card-text minimize more">Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
                </div>
              </div>
              </div>
              <div class="col-md-6 p-l-0 p-r-0">
                <div class="card">
                <img class="card-img-top img-fluid" src="http://placehold.it/550x250" alt="Card image cap">
                <div class="card-block">
                  <h4 class="card-title">Duis aute</h4>
                  <p class="card-text minimize">Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
                </div>
              </div>
              </div>
            </div>
          </div>
        </div><!-- /.end row -->

        </div><!-- /.end row -->
        </section>
      </div> <!-- end container --> 


      </div><!-- /.end row -->
      <section>
      <div class="container">
        <!-- schedule -->
        <div class="col-xs-12">
          <h1 id="schedule" class="display-4 text-xs-center m-b-3 text-muted">Schedule</h1>
          <!-- <h1 class="display-6 text-xs-center m-t-0 m-b-3 text-muted">July 15, 2016</h1> -->
          <ul class="list-group">
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Keynote: Overview <span class="label presentation-time pull-xs-right">9:00am</span></h4>
              Some Name
            </li>
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Communications <span class="label presentation-time pull-xs-right">10:00am</span></h4>
              Some Name
            </li>
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Branding <span class="label presentation-time pull-xs-right">11:00am</span></h4>
              Some Name
            </li>
            <li class="list-group-item list-group-item-info">
              <h4 class="list-group-item-heading">Lunch Break <span class="label presentation-time pull-xs-right">12:00pm</span></h4>
              Grab lunch and join us in the chat lounge
            </li>
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Mobile <span class="label presentation-time pull-xs-right">1:00pm</span></h4>
                Some Name
            </li>
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Analytics <span class="label presentation-time pull-xs-right">2:00pm</span></h4>
                Some Name
            </li>
            <li class="list-group-item">
              <h4 class="list-group-item-heading">Usage <span class="label presentation-time pull-xs-right">3:00pm</span></h4>
                Some Name
            </li>
          </ul><!-- /schedule -->
        </div>
      </div>
      </section>

      <footer>
        <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <div class="footer-desc m-t-3">
              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. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              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. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              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. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            </div>
          </div>
        </div>
      </footer>

      </div><!-- /.end main container -->
      <!--===================================
          MODAL
        ====================================-->

        <div id="register" class="modal fade">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header modal-register">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Register</h4>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
    </body>
    </html>

如何让Scrollspy与我的导航一起使用？

1 个答案: