Bootstrap导航栏，左右两个品牌，中心链接 [英] Bootstrap navbar with 2 brands to the left and right with centered links

问题描述

我想创建一个类似于以下的导航栏：

[BRAND1] ... [LINK1 | LINK2 | LINK3] ... [BRAND2]

这就是我所得到的结果，但折叠菜单看起来很奇怪，并且缺少导航栏和折叠菜单之间的边界。 http://www.bootply.com/fp8e8IYGuj

当宽度大于768像素时，我对外观和行为感到满意，但不是折叠的外观和行为。我希望它表现得像一个正常的折叠式菜单。例如这一个：
http://www.bootply.com/GDf0pzFK9b

解决方案

您需要清除浮动元素，将其添加到您的CSS：

  / *折叠后的navbar菜单* / 
 @media（max-width：767px）{
。 navbar-collapse {
 clear：both; 
 
 
  

检查 TheDemo

I want to create a navbar that looks like:

[BRAND1] ... [LINK1 | LINK2 | LINK3] ... [BRAND2]

this is what I get, but the collapsed menu looks weird and is missing the border between the navbar and the collapsed menu. http://www.bootply.com/fp8e8IYGuj

I'm happy with the look and behavior when the width is > than 768px, but not the collapsed look and behavior. I want it to behave like a "normal" collapsed menu. For example this one: http://www.bootply.com/GDf0pzFK9b

解决方案

You need to clear the floated elements, add this on your CSS:

/* navbar menu when collapsed */
@media (max-width: 767px) {
  .navbar-collapse {
     clear:both;
  }
}

Check TheDemo

这篇关于Bootstrap导航栏，左右两个品牌，中心链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！