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

-1

在移动浏览器上，导航栏变为居中。我希望它能像在更大的视口中一样分开。因此，徽标将位于左侧，菜单图标位于右侧。我该怎么做呢？是否有内置的课程？如何在窄视口上制作导航栏全宽？

2017-04-24 matt

你能后你有这么远的代码？ – ZimSystem

你只需要添加一个覆盖标志和导航容器的移动定位导致某些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中为0123这两个容器的overflow:hidden将防止该容器的崩溃，以便此标题区后面的内容不会挤占标题空间。

来源

2017-04-24 22:04:41 phpenthusiast

通过移动视图在twitter引导网站上查看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阶段，所以事情可能会发生变化。

来源

2017-04-24 22:05:30 crazymatt

使用navbar-toggler-right的菜单图标仍然在右侧，所以你需要分享您所使用的代码..

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

来源

2017-04-24 23:29:14 ZimSystem

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

回答

相关问题