2016-03-11 31 views
0

我正在尝试将导航栏导航栏固定在顶部(我已经完成)并使其可垂直展开。bootstrap导航栏可垂直展开

我想把谷歌地图和我在这个导航栏中的所有控件固定在顶部,并使其可以垂直展开,以便用户可以以响应的方式更改其大小。

我的导航栏和谷歌地图的div代码:

  <div class="navbar navbar-default navbar-fixed-top"> 
      <div class="col-lg-8"> 
      <div class="row"> 
       <div id="map_canvas"></div>    
      </div> 

     </div> 

编辑:我加了的jsfiddle,我不能添加,因为API密钥的谷歌地图,所以我把一个图像,而不是它的同一个基本

https://jsfiddle.net/ajzp3vsf/1/

所以图像固定在导航栏顶部我想要做的就是让导航栏垂直扩展的有点像文本字段在这里计算器。

+0

能否请您做一个工作小提琴,我们就可以明白什么问题是什么? –

+0

@MiomirDancevic我试图解释更多并添加jsfiddle – azelix

回答

1

你的意思是这样的,还必须添加您的回应类图,这是画面小提琴

https://jsfiddle.net/DTcHh/18151/

<div class="container"> 
     <!-- Static navbar --> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
       <img class="img-responsive" src="http://lorempixel.com/400/200/sports/1/" />   
       </li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav> 
</div> <!-- /container -->