html - 使用 Bootstrap 我的导航栏在移动设备上太长了
问题描述
我的网站https://bjmrq.github.io/foyer.html的代码有点麻烦,笔记本电脑上的一切都很好,但是一旦我用手机检查它,导航栏似乎太长了!如果有人可以帮助我:)(我正在使用引导程序 4)感谢您的宝贵时间!
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-sm fixed-top" style="background-color: #563d7c;">
<a class="navbar-brand navTitle mx-2" href="index.html"><span class="fas fa-camera-retro"></span> Sophie Madonna</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggle``r-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item mx-2">
<a class="navbar navTitle nav-link" href="foyer.html"><span class="fab fa-gripfire"></span> Le foyer</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-2">
<a href="about.html" class="nav-link">My Story</a>
</li>
<li class="nav-item mx-2">
<a href="contact.html" class="nav-link">Follow Me</a>
</li>
</ul>
</div>
.navbar {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}
.navbar-light .navbar-brand .navbar-nav .nav-link .navTitle .navbar .navbar-dark {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}
解决方案
第一个标签<hr>
下的元素<h1>
有一个固定的宽度width: 500px;
,这会导致身体的其余部分在较小的屏幕上被向左推。
推荐阅读
- c++ - 在 C++ 中计算二项式系数模块素数 p
- rdf - graphDB 规则集(RDFS-Plus)与 Protege(Pellet/Hermit)中“表现力”差异的示例
- c - Cortex M3 的 Keil ARMCC int64 比较
- python - Sqlite 3:打开数据库时出错提供的绑定数量不正确。当前语句使用 1,提供了 4 个
- html - 部分下的中心 div
- netbeans - 如何解决在 Netbeans 中找不到 ClientDriver 的问题?
- javascript - 我如何在 API javascript 中获取数据?
- google-bigquery - 立即执行:警告:无法计算脚本的已处理字节数估计
- linux - 为 Mattermost 构建 Docker,未找到 /bin/sh dnf
- amazon-web-services - 获取 ENI 并将它们解析为 CloudFormation 中的 IP