html - 为什么此 Bootstrap 导航栏的切换按钮不起作用?

标签 html twitter-bootstrap bootstrap-4

我正在尝试创建 Bootstrap 导航栏,但切换按钮不起作用。我在 body 标签上使用了 .sidebar-collapse 类,因此当我单击切换按钮时,数据应该显示在右侧。但这并没有发生。有人可以告诉我我的代码有什么问题吗?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"> 
</script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/now-ui-kit.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css" rel="stylesheet" integrity="sha384- 
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
<title>
    Techversity
</title>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
    <div class="navbar-translate">
        <a class="navbar-brand" href="#pablo">
           Techversity
       </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" 
data-toggle="collapse" data-target="#navigation" aria-controls="navigation- 
index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-bar bar1"></span>
        <span class="navbar-toggler-bar bar2"></span>
        <span class="navbar-toggler-bar bar3"></span>
    </button>

    </div>

    <div class="collapse navbar-collapse justify-content-end" 
 id="navigation">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#pablo">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo">Disabled</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo"><i class="fa fa-instagram" 
aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo"><i class="fa fa-youtube- 
play" aria-hidden="true"></i></a>
            </li>
        </ul>
    </div>
</div>
</nav>
</body>
</html>

最佳答案

标记不正确。 nav.navbar 元素内不应有 div.containerdiv.navbar-translate 元素。我tried没有它们它也能工作。另外,您可以查看here该标记不是 Bootstrap 所期望的标记。

关于html - 为什么此 Bootstrap 导航栏的切换按钮不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49908889/

相关文章:

html - 在 CSS 中选择 previous sibling - 更新时间轴

javascript - 在 Bootstrap 模态窗口中选择在 Firefox 中不起作用

html - 如何调整 Bootstrap 表中文本输入的宽度?

javascript - 如何禁用页面的点击和滚动?

css - "end"如何对齐 Bootstrap 4 中的 flex 列,同时保持它们的高度相同?

javascript - 考虑使用 Javascript 但禁用 CSS 的浏览器——这合理吗?

javascript - 如果文本框不包含数据则隐藏文本框

javascript - Bootstrap 4 导航选项卡内容在初始页面加载时不显示内容

css - 在末尾对齐bootstrap div

css - 将溢出的列缩放到较小的列(bootstrap 或 vanilla css)