个人中心
gpt4 book ai didi

html - 带有 Affix 的侧边栏不起作用

转载 作者：太空宇宙 更新时间：2023-11-03 19:27:55 26 4
gpt4 key购买 nike

我不是真正的开发人员，但我可以使用 HTML 和 CSS。我正在尝试使用 Bootstrap 3.3.7 构建一个站点，并且我从 an example 中获取了一些代码我在 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>

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

我很感激社区能给我的任何帮助!

最佳答案

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

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>

关于html - 带有 Affix 的侧边栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44999323/

26 4 0
文章推荐： html - 为特定文件中的元素禁用 CSS
文章推荐： Python:当我们的脚本触发并忘记时，如何制作交互式工具？
文章推荐： python - 检测框架上的焦点移出事件
文章推荐： c# - Visual Studio 2010 禁用特定 ascx 控件的设计器代码生成
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com