html - Bootstrap 4 Navbar Dropdown 更改其他导航项位置的问题
问题描述
我的网站导航栏有问题。当我扩展导航栏时它工作正常,但是当它处于折叠状态(对于移动设备)时,导航栏中的下拉项会将其他元素推到左侧并忽略代码(下拉菜单右)用于制作下拉右对齐。
我不确定它为什么这样做。如果有人能找到解决方案,将不胜感激。
如果没有解决方案,我也很想听到替代方案。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top border-bottom border-primary" id="main-nav">
<a href="index.html" class="navbar-brand">Project Name</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav flex-row d-sm-flex justify-content-around ml-sm-auto">
<li class="nav-item btn">
<a href="index.html" class="nav-link active"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item btn">
<a href="documentation/current/#" class="nav-link"><i class="fas fa-book"></i> Documentation</a>
</li>
<li class="nav-item dropdown btn">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<h1 class="dropdown-header">
<i class="fas fa-language fa-lg"></i> Language
</h1>
<div class="dropdown-divider"></div>
<a class="dropdown-item active" href="#">English</a>
<a class="dropdown-item disabled" href="#">Other Languages</a>
</div>
</li>
</ul>
</div>
</header>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
解决方案
设置样式dropdown-menu
.dropdown-menu{ position:absolute !important;}
(而不是!important
,我建议将样式直接应用到div
Bootstrap 的默认 css 优先级)
推荐阅读
- python - 如何更改 GTK 窗口的位置
- apache-zookeeper - 使用 zookeeper 发现指定 apache ignite 节点的公共地址
- python - 如何删除 telnet 输出中多余的字母和数字?
- django - 如何通过表单在 django 模型中添加选择字段?
- python - 从时间序列 xarray 数据集中排除一天数据
- spring-boot - Hibernate Envers:Autowired AuditReader 共享一级缓存
- html - page-break-after:总是不能正常工作
- c# - 如何在 ASP.NET 中访问响应正文
- android - 无法使用热点连接到我的网络服务
- sql - hibernate 错误地将查询转换为 jsonb 字段