Question

我不是真正的开发人员，但我对HTML和CSS没问题。我正在尝试使用Bootstrap 3.3.7构建一个站点，我从Codeply找到的an example中获取了一些代码，当用户向下滚动时会有一个侧边栏。

但是，当我将代码粘贴到我的页面时，侧边栏不会粘住。它只是滚过侧边栏。由于我不是很有经验，我可能在某个地方犯了一个愚蠢的错误，但我很难过。

这是我的HTML：

<!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, shrink-
 to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/style2.css" />
<title>Title</title>
</head>
<title>

</title>
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
  <div class="navbar-header">
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-
  target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a href="/" class="navbar-brand">Explorify</a>
  </div>
</div>
</nav>

<div id="masthead">  
<div class="container">
  <div class="row">
    <div class="col-md-7">
      <h1>Tongues
      </h1>
    </div>
  </div> 
</div><!--/container-->
</div><!--/masthead-->

<!--main-->
<div class="container">
<div class="row">
  <!--left-->
  <div class="col-md-3" id="leftCol">
    <ul class="nav nav-stacked" id="sidebar">
      <li><a href="#sec0">Section 0</a></li>
      <li><a href="#sec1">Section 1</a></li>
      <li><a href="#sec2">Section 2</a></li>
      <li><a href="#sec3">Section 3</a></li>
      <li><a href="#sec4">Section 4</a></li>
    </ul>
  </div><!--/left-->

  <!--right-->
  <div class="col-md-9">
    <h2 id="sec0">Content</h2>
    <p>
      At Bootply we like to build simple Bootstrap templates that utilize 
      the code Bootstap CSS without a lot of customization. Sure you can 
      find a lot of Bootstrap themes and inspiration, but these templates 
      tend to be heavy on customization.</p>

    <hr>
    <p>
      Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae 
      </p>

    <h2 id="sec1">Content</h2>
    <p>
      Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae 
      dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit 
      aspernatur aut odit aut.
    </p>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading"><h3>Hello.</h3></div>
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
            Quisque mauris augue
          </div>
        </div>
      </div>

    </div>
    <hr>
    <h2 id="sec2">Section 2</h2>
    <p>
      Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae 
    </p>
    <div class="row">
      <div class="col-md-4"><img src="//placehold.it/300x300" class="img-
      responsive"></div>
      <div class="col-md-4"><img src="//placehold.it/300x300" class="img-
      responsive"></div>
      <div class="col-md-4"><img src="//placehold.it/300x300" class="img-
      responsive"></div>
    </div> 
    <hr>
    <h2 id="sec3">Section 3</h2>
    <p>
      Images are responsive sed @mdo but sum are more fun peratis unde omnis 
    </p>
    <p>
      Fos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
      qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    </p> 
    <h2 id="sec4">Section 4</h2>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem </p>

    <hr>
    <h4><a href="http://www.bootply.com/Gygh9swISB">Edit on Bootply</a></h4>
    <hr>

    </div><!--/right-->
</div><!--/row-->
</div><!--/container-->
<script src="js/scripts.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.slim.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

发布整个index.html的道歉但是我想知道它是否与我如何链接javascript有关。我将示例中的js代码粘贴到scripts.js中，将CSS粘贴到style2.css中。

我感谢社区给予我的任何帮助！

Answer 1

我不确切地知道你的错误是什么，但我猜你引用了不同的js和css文件而不是codeply或以错误的顺序引用它们。

Click here用于工作版本。（确保增加结果页面的宽度，但是..）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

带有Affix的侧边栏不起作用

1 个答案: