我正在使用 Bootstrap 4.0 并用它创建一个 wordpress 主题,我将 bootstrap.css 文件放在我的主题的 css 文件夹中,将 bootstrap.js 文件放在我的 js 文件夹中我的主题。这些是这些文件夹中仅有的文件。
我在 index.php 文件夹中的代码是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
我希望它能提供导航栏 like the one here
但是,它会像在移动设备上一样折叠导航栏。它将“导航栏”一词一直向右移动,并将所有页面组合成一个下拉列表,并将其移动到屏幕的左侧。
我创建了一个 html 文件,它执行完全相同的操作。
我的浏览器设置为 100%。我在使用 Bootstrap 时从未遇到过这个问题。
有人知道是什么原因造成的吗?我确信这是我所缺少的极其简单的东西。
最佳答案
navbar-toggleable-md
在 Bootstrap v4(测试版)中不是有效语法。您正在寻找添加汉堡菜单响应切换的类名称是 navbar-expand-md
http://getbootstrap.com/docs/4.0/components/navbar/
以上链接概述了版本 4 的 Navbar 组件,包括切换类。此类未在版本 3 中使用,但有关从 3 到 4 转换的信息,我鼓励您阅读他们的迁移文档:
关于html - 无论屏幕大小如何,媒体查询都会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47781641/