gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:50:47 24 4
gpt4 key购买 nike

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com