我的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>
我看到了与此有关的问题,但没有任何解决方案能够解决我的问题。当我们使用静态导航栏时,似乎这个问题很常见。
先谢谢您! ;)
答案 0 :(得分:0)
您需要将margin
标签的padding
和0px
设置为body
。
以下是正在运行的演示:
body {
margin: 0;
padding: 0;
}
nav.navbar {
background-color: black;
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>
答案 1 :(得分:0)
问题是在导航栏下面我没有设置宽度的图像。而且由于它比屏幕还要宽,因此导航栏并不是100%覆盖。在我将该图像的宽度设置为100%或更小后,它修复了。感谢您的所有答案! ;)
最好的问候, 爱德华多