Bootstrap导航栏使用传单消失

本文介绍了Bootstrap导航栏使用传单消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在将传单与Bootstrap集成时遇到一些困难.我正在使用一个脚本，该脚本创建可折叠的左侧导航栏.当我与传单地图进行交互时，引导导航栏消失了.

I am having some difficulty integrating leaflet with Bootstrap. I am using a script that creates a collapsible left navbar. When I interact with the leaflet map, the bootstrap navbar disappears.

这似乎是CSS冲突，但我似乎无法确定从哪里开始进行故障排除.这是jsfiddle，后跟CSS: http://jsfiddle.net/6sSrE/.请注意，单击地图时，导航栏会消失.

This seems to be a CSS conflict, but I can't seem to identify where to begin troubleshooting. Here is the jsfiddle followed by CSS: http://jsfiddle.net/6sSrE/. Notice that when clicking the map, the navbar disappears.

如果另一双眼睛可以提出不同的方向来识别此问题，则将很有帮助.我真的很想在此应用程序中使用Bootstrap，但无法解决冲突.

It would be helpful if another set of eyes could suggest a different direction to identify this problem. I would really like to use Bootstrap for this application, but I can't resolve the conflict.

html, body, #map {
height: 100%;
margin: 0;
}
   body .viewport {
  position: absolute;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

body .viewport .frame {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0;
}

body .viewport .frame .navbar .navbar-inner {
  border-radius: 0;
  padding-left: 5px;
}

body .viewport .frame .menu {
  height: 100%;
  /* background-color: #3D6AA2; */
}

body .viewport .frame .menu.collapse {
  float: left;
  height: 100% !important;
  width: auto;
}

body .viewport .frame .menu.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

body .viewport .frame .menu.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

body .viewport .frame .menu.collapse.in.width {
  width: auto;
}

body .viewport .frame .menu.collapse.in.height {
  height: auto;
}

body .viewport .frame .menu .collapse-inner {
  position: relative;
  width: 250px;
  height: 100%;
}

body .viewport .frame .menu .navbar .navbar-inner {
  text-align: center;
  color: grey;
  font-size: 1.2em;
  line-height: 38px;
}

body .viewport .frame .menu .nav-stacked {
  padding: 0 10px;
}

body .viewport .frame .view {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

body .viewport .frame .view .navbar .navbar-inner .btn-navbar {
  display: block;
  float: left;
}

body .viewport .frame .view #map {
  margin: auto 15px;
  text-align: justify;
}

推荐答案

看起来每次地图聚焦时，网页都会向下移动78个像素. (您也许可以找到发生这种情况的位置并加以解决.)

It looks like every time the map gets focused the webpage is moving 78 pixels down. (You might be able to find where this is happening and fix it.)

但是，我只是想出了一些快速方法，可以调整您的导航栏，使其每次都显示在页面顶部.

However I just came up with something quick that would adjust your navbar so that it would show up at the top of the page every time.

$(document).ready(function(){
    var margin = 78;
    $('#map').on('mousedown',function(){
        $('#navBar').css('margin-top',margin+'px');
    });
    $('#map').blur(function(){
        margin = margin+78;
    });
});

注意:我还向您的导航栏添加了一个ID.

Note: I also added a ID to your nav bar.

<div class="navbar navbar-inverse" id="navBar">

这里是一个示例，目前看来效果不错，但是稍后值得您花时间弄清楚为什么将页面下移.

Here is an example, seems to work pretty good for now, but might be worth your time later to figure out why the page is being moved down.

http://jsfiddle.net/6sSrE/15/

这篇关于Bootstrap导航栏使用传单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

With