为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap3 导航栏在 jsfiddle 上折叠,但在本地浏览器上不起作用

bootstrap3 导航栏在 jsfiddle 上折叠,但在本地浏览器上不起作用

墨色风雨 2022-09-23 10:03:22

bootstrap3 导航栏折叠在 jsfiddle 上工作如下。

https://jsfiddle.net/wa3he6bn/1/


<html>

<header>

    <title>title</title>

    ....

</header>

<body>

<div class="wrap">

    <nav id="w1" class="navbar-default navbar-fixed-top navbar">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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 class="navbar-brand" href="/index.php">Logo</a></div>

            <div id="w1-collapse" class="collapse navbar-collapse">

                <ul id="w2" class="navbar-nav navbar-right nav">

                    <li><a href="/index.php?r=site%2Findex">主页</a></li>

                    <li><a href="https://docs.mathcrowd.cn" target="_blank">文档</a></li>

                    <li><a href="/index.php?r=worksheet%2Ffilter">卷库</a></li>

                    <li class="help-link"><a href="javascript:void(0);"><span

                            class="glyphicon glyphicon-question-sign"></span></a></li>

                    <li><a href="/index.php?r=cart%2Fview"><span class="glyphicon glyphicon-shopping-cart"></span></a>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

</div>

</body>

</html>

http://img4.sycdn.imooc.com/632d14080001fe3b06390696.jpg

但是当保存相同的html并在本地运行时,它不会崩溃。

http://img1.sycdn.imooc.com/632d141400017f5306430315.jpg

查看完整描述

3 回答

?
UYOU

TA贡献1545条经验 获得超4个赞

首先使用而不是尝试在您的部分中使用此元标记<head><header><head>

<meta name="viewport" content="width=device-width, initial-scale=1">

然后,导航栏将折叠所有小于768px的屏幕尺寸,作为引导的默认行为。因此,要将其扩展到某个屏幕断点,您可以将此类组合添加到主导航元素中。navbar-expand-*

希望它对你有用。


查看完整回答
反对 回复 2022-09-23
?
ABOUTYOU

TA贡献0条经验 获得超5个赞

在代码中应考虑许多事项。

通过遵循这两个注释,您的代码应该按预期工作。

<html>


<head>


  <title>title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


  <!-- Optional theme -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


  <!-- Latest compiled and minified JavaScript -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</head>


<body>

  <div class="wrap">

    <!-- 以下为页眉内容 -->

    <nav id="w1" class="navbar-default navbar-fixed-top navbar">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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 class="navbar-brand" href="/index.php">Logo</a></div>

        <div id="w1-collapse" class="collapse navbar-collapse">

          <ul id="w2" class="navbar-nav navbar-right nav">

            <li><a href="/index.php?r=site%2Findex">主页</a></li>

            <li><a href="https://docs.mathcrowd.cn" target="_blank">文档</a></li>

            <li><a href="/index.php?r=worksheet%2Ffilter">卷库</a></li>

            <li class="help-link"><a href="javascript:void(0);"><span class="glyphicon glyphicon-question-sign"></span></a></li>

            <li><a href="/index.php?r=cart%2Fview"><span class="glyphicon glyphicon-shopping-cart"></span></a>

            </li>

          </ul>

        </div>

      </div>

    </nav>

    <!-- 结束 -->

  </div>

</body>


</html>


查看完整回答
反对 回复 2022-09-23
?
慕容3067478

TA贡献1460条经验 获得超3个赞

使用 标记。并在页面末尾附近,在 标记结束之前包含 js 文件。为了节省将来的时间,请访问引导官方文档。https://getbootstrap.com/docs/4.5/getting-started/introduction/<head></body>

它是最好和写得很好的文档之一。

//img2.sycdn.imooc.com/632d14390001323609490490.jpg

查看完整回答
反对 回复 2022-09-23
  • 3 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信