html - 无论屏幕大小如何,媒体查询都会触发

标签 html css wordpress twitter-bootstrap

我正在使用 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 转换的信息,我鼓励您阅读他们的迁移文档:

https://getbootstrap.com/docs/4.0/migration/

关于html - 无论屏幕大小如何,媒体查询都会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47781641/

相关文章:

php - 从 Woocommerce 3 中的订单中获取选定的变体属性

html - 无法居中或移动社交媒体按钮 DIV SVG

html - 绝对 css 位置 - firefox 插件使其更快?

javascript - 将 JSP 值传递给 javascript

html - 嵌入字体未渲染或下载

php - 撤出帖子后将标签放在 block 引号上

html - 在 beforeSend 上删除 ajax loader 并在 Start 后再次添加它

javascript - 如何添加具有相同宽度的点(...)?

jquery - 遍历 HTML : how can I hide a color when I move to another element?

javascript - 选项卡中的嵌套选项卡( Bootstrap )