热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4导航栏切换器未显示

如何解决《Bootstrap4导航栏切换器未显示》经验,为你挑选了1个好方法。

这是我第一次使用Bootstrap 4 beta.我有一个慈善团体网站,我现在在BS3中制作并运行.我正在使用固定的顶部导航栏和自定义CSS.当网站查看较小而不是全屏时,切换图标不会显示.你能帮助我吗?我希望它像导航链接一样是白色的,并且悬停会更改要读取的链接.这是头部链接

    

 `

js代码链接在页面底部

 
 

这是我的代码.

/* Navbar */

.navbar-custom {
    background-color: #3193de;
}


/* change the brand and text color */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    text-decoration: none; color: #fff;
}


/* change the link color */

.navbar-custom .navbar-nav .nav-link {
   text-decoration: none; color: #fff;
}


/* change the color of active or hovered links */

.navbar-custom .nav-item.active .nav-link,
.navbar-custom  {
  text-decoration: none;  color: #fff;
}

.nav-item .nav-link:hover {
    text-decoration: none; color: #ff0000;
}

/* for dropdown only - change the color of dropdown */

.navbar-custom .dropdown-menu {
    background-color: #3193de;
}

.navbar-custom .dropdown-item {
    text-decoration: none; color: #fff;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    text-decoration: none; color: #ff0000;
    background-color:#3193de;
}
.navbar-header .navbar-toggler {
  border: 0;
}
.navbar-toggler-icon {
  color: #fff;
}
.navbar-toggler-icon:hover {
  background: #ff0000;
}

该页面现已发布在http://ahepa215.org/navbar-top-fixed.html



1> Jade Cowan..:

@mlegg,id由于该data-toggler属性与您的属性不具有相同的值,您的切换器图标不会切换button.下面的代码显示了它应该是什么.




至于切换图标的样式,您可以使用以下代码:

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke- stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

为了彻底了解这里发生的事情,请查看@ ZimSystem在这个堆栈溢出问题中的答案.最终,您必须在background-image类似的URL中设置stroke属性的值,以便:

stroke='rgba(255,255,255, 1)'

签出这个codeply项目


推荐阅读
  • 需求:在指定的DIV区域内点击时,需展示该区域内的附加操作面板;而在区域外点击时,则应自动隐藏该附加操作面板。通过精准的事件监听与处理,确保用户交互体验的流畅性和直观性。 ... [详细]
  • Android ListView 自定义 CheckBox 实现列表项多选功能详解
    本文详细介绍了在Android开发中如何在ListView的每一行添加CheckBox,以实现列表项的多选功能。用户不仅可以通过点击复选框来选择项目,还可以通过点击列表的任意一行来完成选中操作,提升了用户体验和操作便捷性。同时,文章还探讨了相关的事件处理机制和布局优化技巧,帮助开发者更好地实现这一功能。 ... [详细]
  • REST API 时代落幕,GraphQL 持续引领未来
    尽管REST API已广泛使用多年,但在深入了解GraphQL及其解决的核心问题后,我深感其将引领未来的API设计趋势。GraphQL不仅提高了数据查询的效率,还增强了灵活性和性能,有望成为API开发的新标准。 ... [详细]
  • 本文深入探讨了Android事件分发机制的源代码,重点分析了DecorView作为Activity根布局的角色及其在事件传递中的作用。同时,详细解析了PhoneWindow在Activity窗口管理中的关键功能,以及它如何与DecorView协同工作,确保用户交互事件的高效处理。 ... [详细]
  • 本文旨在构建一个JavaScript函数,用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式,并检查密码强度,以提升用户账户的安全性。通过集成正则表达式和条件判断语句,该方法能够有效防止常见的输入错误,同时提供即时反馈,改善用户体验。 ... [详细]
  • 在处理大文件上传时,服务端为何无法直接接收?这主要与 PHP 配置文件 `php.ini` 中的几个关键参数有关,如 `upload_max_filesize` 和 `post_max_size`。这些参数分别限制了单个文件的最大上传大小和整个 POST 请求的数据量。为了实现大文件的高效上传,可以通过文件分割与分片上传的方法来解决。本文将详细介绍这一实现方法,并提供相应的代码示例,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • OpenCV 2.4.9 源码解析:级联分类器的错误率与尺寸分析 ... [详细]
  • Spring Boot 实战(一):基础的CRUD操作详解
    在《Spring Boot 实战(一)》中,详细介绍了基础的CRUD操作,涵盖创建、读取、更新和删除等核心功能,适合初学者快速掌握Spring Boot框架的应用开发技巧。 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
  • 深入解析 Android Drawable:第六阶段进阶指南 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 使用React与Ant Design 3.x构建IP地址输入组件
    本文深入探讨了利用React框架结合Ant Design 3.x版本开发IP地址输入组件的方法。通过详细的代码示例,展示了如何高效地创建具备良好用户体验的IP输入框,对于前端开发者而言具有较高的实践指导意义。 ... [详细]
  • 在Adobe After Effects中,通过高效添加地图指北针,可以显著提升地理信息的准确性和视觉效果。本文介绍了一种方法,利用代码函数 `public static void ExportMapEx(string filepath, int resolution, AxMapControl curMapControl)`,实现地图导出时自动添加指北针,确保地理数据的精确性和一致性。此外,还详细探讨了如何优化指北针的位置和样式,以增强地图的可读性和专业性。 ... [详细]
  • 本文详细探讨了Struts框架中几种常用的数据标签,包括`s:property`、`s:a`、`s:debug`、`s:include`和`s:param`。这些标签在实际开发中的应用广泛,不仅用于数据展示和链接生成,还提供了调试和模块化功能。文章分析了每个标签的基本用法及其属性配置,并结合具体示例介绍了如何进行性能优化和最佳实践。通过这些内容,开发者可以更好地理解和利用这些标签,提高开发效率和代码质量。 ... [详细]
author-avatar
佳佳的梦Aas
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有