Question

我正在尝试将引导导航栏固定在顶部（我已经完成）并使其可以垂直扩展。

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

导航栏和Google地图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/

所以图像固定在导航栏的顶部我想要做的是使导航栏垂直展开，有点像stackoverflow中的文本字段。

Answer 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 -->

bootstrap navbar垂直扩展

1 个答案: