如何在窄视口上使导航栏全宽？

Question

在移动浏览器上，导航栏会居中。我希望它像在较大的视口中一样间隔开。因此徽标位于左侧，菜单图标位于右侧。我该怎么做呢？有没有内置的课程？

Answer 1

在移动视图中查看Twitter bootstrap网站上的DOM，我将width:100%添加到导航栏container类。看起来像这样：

@media (max-width: 991px){
   .navbar-toggleable-md>.container {
      padding-right: 0;
      padding-left: 0;
      width: 100%; //ADD ME
   }
}

这使得Bootstrap文本显示在左侧，移动导航按钮显示在右侧。我没有对此进行广泛测试，因此您可能希望这样做。另外要记住的一件事是版本4仍处于alpha阶段，因此事情可能会发生变化。

Answer 2

使用navbar-toggler-right菜单图标保留在右侧，因此您需要共享您正在使用的代码..

http://www.codeply.com/go/e3G0GCF5zW

Answer 3

您只需添加一些CSS代码，以覆盖移动渲染中徽标和导航容器的位置。

@media only screen and (max-width:640px) {
#logo {float:left;position:relative;max-width:49%;}
#navigation_container {float:right;position:relative;max-width:49%;}
}

您需要在特定情况下为标记设计正确的CSS标识符，以便此CSS代码可以正常工作，以及任何断点宽度值对您的情况有意义。 最后提示：在这两个容器的css中都有overflow:hidden可以防止该容器崩溃，因此该标题区域后面的内容不会占用标题空间。