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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com