使导航栏可堆叠（引导程序）

Posted 2023-04-13

【中文标题】使导航栏可堆叠（引导程序）

【英文标题】：Making a navbar stackable (bootstrap)

【发布时间】：2016-11-22 04:53:41

【问题描述】：

我想知道是否有人会帮助我使用引导程序更正我的 html，这样当窗口最小化时，导航栏会自动折叠成一个汉堡图标。

这是我的 HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a>
    </div>

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

        <ul class="nav navbar-nav">
            <li><a href="home.html">Topics</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact Us</a></li>



        </ul>
    </div>
</div>

非常感谢！ :)

【问题讨论】：

你是加了bootstrap的js吗？

有很多教程可以帮助你做到这一点。我认为这个 SO 问题可能对其他资源有所帮助 - ***.com/questions/26317679/…

【参考方案1】：

它工作正常，请添加引导文件和 jquery 文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a>
    </div>

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

        <ul class="nav navbar-nav">
            <li><a href="home.html">Topics</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact Us</a></li>



        </ul>
    </div>
</div>