Html 带有粘贴的侧边栏不工作_Html_Css_Affix

Html 带有粘贴的侧边栏不工作

html css

Html 带有粘贴的侧边栏不工作,html,css,affix,Html,Css,Affix,我不是一个真正的开发者，但我对HTML和CSS都很在行。我正试图用Bootstrap3.3.7构建一个站点，我从Codeply上找到了一些代码，当用户向下滚动时，我会在其中添加一个边栏然而，当我将他们的代码粘贴到我的页面中时，侧边栏不会粘住。它只是滚动过侧边栏。由于我不是很有经验，我可能在某个地方犯了一个愚蠢的错误，但我被难住了这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charse

我不是一个真正的开发者，但我对HTML和CSS都很在行。我正试图用Bootstrap3.3.7构建一个站点，我从Codeply上找到了一些代码，当用户向下滚动时，我会在其中添加一个边栏

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

这是我的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>


标题
切换导航
舌头







所容纳之物

在Bootply，我们喜欢构建简单的引导模板，利用
代码引导CSS而无需大量定制。当然可以
找到很多引导主题和灵感，但是这些模板
倾向于大量定制


Rem aperiam，根据发明者的真实性和准真实性
比塔维塔建筑师

所容纳之物

Rem aperiam，根据发明者的真实性和准真实性
比塔维塔建筑师
格言必须解释清楚。尼莫·埃尼姆·伊普萨姆·沃卢帕塔姆·奎亚·沃卢帕塔斯·西特
aspernatur aut odit aut。

你好
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
告别精英。两个品种的葡萄都是由一个品种的葡萄酿成的。
奎斯克·莫里斯·奥古斯

第二节

Rem aperiam，根据发明者的真实性和准真实性
比塔维塔建筑师


第三节

图像是响应sed@mdo的，但sum更有趣


这是一个合理的解释。内克·波罗·奎斯坎东部，
我不知道该怎么做，我不知道该怎么做，

第四节

所有人都有明显的错误

很抱歉发布了整个index.html，但我想知道这是否与我链接javascript的方式有关。我将示例中的js代码粘贴到scripts.js中，将CSS粘贴到style2.CSS中

我感谢社区能给我的任何帮助

我不知道你的错误是什么，但我猜你引用了不同于codeply的js和css文件，或者引用顺序不对

对于工作版本。（请确保增加结果页的宽度…）

您的代码，HTML文档中的所有内容在我尝试时都能正常工作。我想这证实了我的怀疑，我的样式表链接错误，但我不知道为什么。我希望我能看到Codeply示例是如何将它们联系起来的。谢谢尽管我现在注意到，单击Codeply示例中的菜单选项会将您发送到略低于部分标题的位置。知道为什么会这样吗？我想那是因为导航栏在它应该发送给你的位置上方，增加每个部分的填充可以解决这个问题。例如：

Content

好提示，谢谢。最后一件事困扰着我。侧边栏上的活动状态似乎对我不起作用，即使我只是复制了你的代码。出于某种原因，第4节似乎默认为橙色，单击其他部分不会改变它。

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