[英]Using Bootstrap my nav bar is too long on mobile
我在使用我的网站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;
}
第一个<h1>
标签下的<hr>
元素设置了宽度width: 500px;
这导致身体的其余部分在较小的屏幕上被向左推。
对图像使用 img-fluid 类
<div class="col-md-5 col-lg-5 col-12 col-sm-12">
<div class="heading-text">
<img src="/images/1/undraw_uploading_go67.svg" class="img-fluid" alt="">
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.