本文介绍了使用Bootstrap我的手机导航栏太长了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站代码有点问题https://bjmrq.github.io/foyer.html笔记本电脑上一切正常，但当我用手机查看时，导航栏似乎太长了！如果有人能帮我的话：)(我用的是Bootstrap 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;
}
here is my problem
推荐答案
第一个<h1>标记下面的<hr>元素具有设置的宽度width: 500px;，这会导致正文的其余部分在较小的屏幕上向左推。
这篇关于使用Bootstrap我的手机导航栏太长了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！