Question

我正在使用 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>

我希望它能够提供一个Navbar like the one here

但相反，它会将Navbar折叠起来，就像它在移动设备上一样。它移动＆＃34; Navbar＆＃34;一直向右，并将所有页面组合成一个下拉列表，然后移动到屏幕的左侧。

我创建了一个html文件，它完全一样。

我的浏览器设置为100％。我从来没有使用Bootstrap这个问题。

有人会对导致这种情况的原因有任何想法吗？我确信这只是一件非常简单的事情，我完全不知道。

Answer 1

scanf()在Bootstrap v4（Beta）中不是有效语法。您正在寻找的类名称是navbar-toggleable-md

添加响应性切换汉堡包菜单

http://getbootstrap.com/docs/4.0/components/navbar/

上面的链接概述了版本4的Navbar组件，包括toggle类。这个类没有在版本3中使用，但是有关3到4过渡的信息，我建议您阅读他们的迁移文档：

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

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

1 个答案: