Css 下拉菜单正在向下推导航栏。如何避免呢？

我不熟悉引导和web开发

我想建立一个网页，其中有两个导航栏，根据屏幕大小，只有一个导航栏将显示。对于屏幕大小>768px的情况，一切正常（至少看起来如此）对于较低分辨率，下拉菜单将导航栏向下推到内容上方。

如何避免这种情况？任何形式的帮助都将不胜感激。提前谢谢

单击JSFIDLE的此链接

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#标题
{
位置：相对位置；
z指数：1010；
}
/*导航样式*/
.navbar默认值{
边框底部：0.5px实心rgb（180180）；
}
.navbar品牌{
字体系列：Comic Sans MS；
颜色：rgb（0,50150）；
字体大小：150%；
字体大小：斜体；
}
/*结束*/
/*桌面酒吧相关*/
@介质（最大宽度：767px）
{
.桌面酒吧{
/*保证金：10px 10px 10px 10px*/
显示：无；}
}
.移动导航{
边际：0px；
填充：0px；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行；
柔性流：行；
-webkit柔性包装：nowrap；
柔性包装：nowrap；
-webkit内容：flex start；/*Safari*/
调整内容：灵活启动；
}
.暴民之家{
-网络工具包订单：1；/*Safari*/
顺序：1；
-webkit flex grow:1；/*Safari*/
柔性生长：1；
左边距：-1米；
}
.暴徒搜查{
/*宽度：50%；
边缘顶部：0.2米*/
边缘顶部：0.5em；
-网络工具包订单：2；/*Safari*/
顺序：2；
-webkit flex grow:2；/*Safari*/
柔性生长：2；
最小宽度：6em；
尺寸：50%
}
.暴徒通知{
-网络工具包订单：3；/*Safari*/
顺序：3；
-webkit flex grow:1；/*Safari*/
柔性生长：1；
最小宽度：5em；
}
.更多暴徒{
/*宽度：7em*/
-网络工具包订单：4；/*Safari*/
顺序：4；
-webkit flex grow:2；/*Safari*/
柔性生长：2；
最小宽度：7em；
}
@介质（最小宽度：768px）
{
.流动酒吧{
/*保证金：10px 10px 10px 10px*/
显示：无；}
}
/*结束*/
.包装纸{
填充顶部：50px；
}
.徽章危险{
背景色：#d43f3a；
}
.徽章暴徒通知{
左边距：-0.5em；
边缘顶部：-0.5em；
}

导航
艺术品
在一边

CSS用于引导下拉菜单，该菜单不会在狭窄的屏幕上折叠 引导基于这样的假设：当屏幕宽度为767px或更小时，所有菜单项都会折叠。这就是下拉菜单改变其行为的原因。现在它像普通折叠菜单的一部分一样打开

因此，您必须重新定义

.navbar nav.open.dropdown菜单类的样式。我正在使用此变体：

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

请检查结果：


$（文档）.ready（函数（）{
$（'.dropdown toggle'）.dropdown（）；
});
@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#标题{
位置：相对位置；
z指数：1010；
}
/*导航样式*/
.navbar默认值{
边框底部：0.5px实心rgb（180、180、180）；
}
.navbar品牌{
字体系列：Comic Sans MS；
颜色：rgb（0,50,150）；
字体大小：150%；
字体大小：斜体；
}
/*桌面酒吧相关*/
@介质（最大宽度：767px）{
.桌面酒吧{
/*保证金：10px 10px 10px 10px*/
显示：无；
}
}
.移动导航{
边际：0px；
填充：0px；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行；
柔性流：行；
-webkit柔性包装：nowrap；
柔性包装：nowrap；
-webkit内容：flex start；
调整内容：灵活启动；
}
.暴民之家{
-网络工具包订单：1；
顺序：1；
-webkit-flex-grow:1；
柔性生长：1；
左边距：-1米；
}
.暴徒搜查{
/*宽度：50%；
边缘顶部：0.2米*/
边缘顶部：0.5em；
-网络工具包订单：2份；
顺序：2；
-webkit-flex-grow:2；
柔性生长：2；
最小宽度：6em；
尺寸：50%
}
.暴徒通知{
-网络工具包订单：3份；
顺序：3；
-webkit-flex-grow:1；
柔性生长：1；
最小宽度：5em；
}
.更多暴徒{
/*宽度：7em*/
-网络工具包订单：4份；
顺序：4；
-webkit-flex-grow:2；
柔性生长：2；
最小宽度：7em；
}
@介质（最小宽度：768px）{
.流动酒吧{