即使 Bootstrap 4 中导航栏折叠，如何保持导航栏项目可见？
发布于2024-11-02
浏览：865
Bootstrap 4：折叠容器外部的持久导航栏项目
当重要链接（例如社交媒体图标）在导航栏折叠成较小的形状时消失时，导航网站可能会令人沮丧屏幕。幸运的是，Bootstrap 4 提供了一个优雅的解决方案，即使在菜单折叠时也能保持某些导航栏项目可见。
问题
当屏幕宽度变窄时导航栏设置为折叠时，就会出现此问题。此行为由 .collapse 类控制。默认情况下，当折叠被激活时，.collapse 容器内的所有元素都会隐藏。
解决方案
要防止某些导航栏项目随着折叠而消失，只需将它们移到 .collapse 容器之外。这可以通过使用 order-* 实用程序类来调整元素的 Flexbox 顺序来实现。
代码示例
在此示例中，社交媒体图标放置在 .collapse 元素外部的容器内。 d-flex 和 order-* 类确保导航栏折叠时图标保持正确的顺序和位置。
最新教程
更多>
-
EchoAPI 与 Insomnia：结合实例进行综合比较作为一名全栈开发人员，我知道拥有一流的工具来调试、测试和记录 API 是多么重要。 EchoAPI 和 Insomnia 是两个出色的选项，每个选项都有自己独特的特性和功能。让我带您了解这些工具，比较它们的功能和优点，给您一些实际示例，并帮助您决定何时使用 EchoAPI 或 Insomnia。 ...编程 发布于2024-11-02 -
出发时间和持续时间|编程教程介绍 本实验旨在测试您对 Go 的时间和持续时间支持的理解。 时间 下面的代码包含如何在 Go 中使用时间和持续时间的示例。但是，代码的某些部分丢失了。您的任务是完成代码，使其按预期工作。 Go编程语言基础知识。 熟悉 Go 的时间和持续时间支持。 $ go run...编程 发布于2024-11-02
-
了解 JavaScript 中的文档对象模型 (DOM)你好，神奇的 JavaScript 开发者？ 浏览器提供了一个称为文档对象模型 (DOM) 的编程接口，它允许脚本（特别是 JavaScript）与网页布局进行交互。网页的文档对象模型 (DOM) 是一种分层树状结构，它将页面的组件排列成对象，由浏览器在加载时创建。借助此范例，文档...编程 发布于2024-11-02
-
开始使用 SPRING BATCH 进行编程Introduction Dans vos projets personnels ou professionnels, Il vous arrive de faire des traitements sur de gros volumes de données. Le traite...编程 发布于2024-11-02
-
使用 CSS 让您的 Github 个人资料脱颖而出以前，自定义 Github 个人资料的唯一方法是更新图片或更改名称。这意味着每个 Github 配置文件看起来都一样，自定义它或脱颖而出的选项很少。 从那时起，您可以选择使用 Markdown 创建自定义部分。您可以包括您的简历、您的兴趣和爱好，让您的个人资料反映您的身份。这是任何人在访问您的个人资...编程 发布于2024-11-02
-
TypeScript 实用程序类型：增强代码可重用性TypeScript 提供内置实用程序类型，允许开发人员有效地转换和重用类型，使您的代码更加灵活和 DRY。在本文中，我们将探讨关键实用程序类型，例如 Partial、Pick、Omit 和 Record，以帮助您将 TypeScript 技能提升到新的水平。 Partial：使所有属性可选 部分实...编程 发布于2024-11-02
-
电报 window.open(url, &#_blank&#);在ios上工作很奇怪我正在制作一个电报机器人，我想添加将一些信息从小型应用程序转发到聊天的选项。我决定使用 window.open(url, '_blank');在我在 iPhone 上尝试之前它一直运行良好。我没有转发，而是分享（这是一件大事，我正好需要转发一条消息）。我有一些如何处理它的想法，但它们...编程 发布于2024-11-02
-
如何使用保留的 CSS 样式将 HTML 内容另存为 PDF？使用 CSS 将 HTML 内容保存为 PDF在 Web 开发中，即使将内容导出为不同格式，保持视觉美观也至关重要。当尝试将 HTML 元素另存为 PDF 时，这可能会带来挑战，因为 CSS 样式可能会在转换过程中丢失。对于必须在保存的 PDF 中保留 CSS 的情况，请考虑使用以下方法：创建新窗口...编程 发布于2024-11-02
-
为什么使用 Print_r() 时要向 DateTime 对象添加幻像属性？Print_r() 更改 DateTime 对象Print_r() 向 DateTime 对象添加属性，从而在调试期间启用自省。此行为是 PHP 5.3 中引入的内部功能的副作用，它将幻像公共属性分配给转储到文本的实例。要避免这些属性引起的错误，请改用反射。然而，不建议寻找这些属性，因为它们没有在类...编程 发布于2024-11-02
-
C 语言的数据结构和算法：适合初学者的方法在 C 语言中，数据结构和算法用于组织、存储和操作数据。数据结构：数组：有序集合，使用索引访问元素链表：通过指针链接元素，支持动态长度栈：先进后出 (FILO) 原则队列：先进先出 (FIFO) 原则树：分级组织数据算法：排序：按特定顺序排序元素搜索：在集合中查找元素图形：处理节点和边之间的关系实战...编程 发布于2024-11-02
-
## `has_key()` 还是 `in`？ 在 Python 中检查字典键的最佳方法是什么？在 Python 中选择“has_key()”和“in”来检查字典键当涉及到验证是否存在Python 字典中的特定键，“has_key()”和“in”都提供了可行的选项。然而，首选方法随着时间的推移而演变。历史上，“has_key()”通常用于检查字典中键是否存在。然而，此函数已在 Python 3...编程 发布于2024-11-02
-
如何使用 AJAX 将 JSON 数据发送到 PHP？如何使用 Ajax 将 JSON 数据传输到 PHP为了以 JSON 格式将数据传输到 PHP 脚本，至关重要的是能够使用 AJAX 有效地发送数据。发送 JSON 数据提供的代码说明了使用 AJAX 发送 JSON 数据的尝试：$.ajax({ type: "POST", ...编程 发布于2024-11-02
-
JS：承诺还是回调？理解 JavaScript 中的 Promise 与 Callback 认证测试的关键问题和解答 什么是回调函数，它与常规函数有何不同？ 回调函数作为参数传递给另一个函数并被调用以处理异步操作。与常规函数不同，回调被设计为在完成某个任务后执行。 与回调相比，Prom...编程 发布于2024-11-02
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
