文章/答案/技术大牛

发布

社区首页 >问答首页 >静态引导导航栏在较小屏幕上不会达到100%宽度

问静态引导导航栏在较小屏幕上不会达到100%宽度
EN

Stack Overflow用户

提问于 2018-09-03 09:45:29

回答 2查看 93关注 0票数 1

伙计们，我的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>

我已经看到了这方面的问题，但没有解决我的问题。当我们使用静态导航栏时，这个问题似乎很常见。

提前感谢您！;)

css

html

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

发布于 2018-09-03 09:54:39

对于body标签，需要将margin和padding设置为0px。

以下是工作演示：

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>

票数 0

Stack Overflow用户

发布于 2018-09-03 19:20:28

问题是在导航栏下面我有一个没有设置宽度的图像。由于它比屏幕更宽，导航栏的跨度不是100%。它修复后，我设置的宽度为100%或更少的图像。感谢您的所有回答！;)

致以最好的问候，爱德华多

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52142322

复制

相似问题

问静态引导导航栏在较小屏幕上不会达到100%宽度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态引导导航栏在较小屏幕上不会达到100%宽度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态引导导航栏在较小屏幕上不会达到100%宽度
EN