css - 静态引导导航栏在较小的屏幕上不会达到 100% 的宽度
问题描述
伙计们,我的navbar
. 在较小的屏幕中,导航栏不会跨越全宽。这是我的代码:
nav.navbar {
background-color: black;
/* top: 0;
margin: 0; */
padding-left: 0;
padding-right: 0;
width: auto;
box-sizing: border-box;
border-bottom: 5px solid #333333;
}
div.navbar-collapse {
background-color: black;
width: 100%;
white-space: nowrap;
}
<nav class="navbar navbar-expand-xl static-top">
<button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar mid"></div>
<div class="bar"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav options links">
<a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
</div>
</div>
</nav>
我已经看到了这方面的问题,但没有解决我的问题。当我们使用静态导航栏时,似乎这个问题很常见。
先感谢您!;)
解决方案
问题是在导航栏下面我有一个没有设置宽度的图像。而且由于它比屏幕宽,导航栏的跨度不是 100%。在我将该图像的宽度设置为 100% 或更少后,它就修复了。谢谢大家的回答!;)
最好的问候, 爱德华多
推荐阅读
- python - 没有额外模块的蛮力密码破解程序无法正常工作
- python - 如何在Python中保留包含某些字母的唯一句子
- javascript - JS drawImage坏了
- r - R返回错误:下标超出范围
- flutter - 将flutter升级为Flutter 2.0.4后如何提取具有onPressed方法的小部件
- javascript - 如何使用 React 渲染 html 按钮的新组件 onClick?
- vue.js - BeforeRouteEnter 未将数据加载到变量
- javascript - 仅获取 javascript 或 jquery 中类型的第一级子级
- java - openJDK中不一致的口吃
- android - 如何在 Android 中正确地将文件保存到外部存储?