Bootstrap FullScreen Google Map无响应

时间:2013-06-28 17:18:04

标签: css3 twitter-bootstrap responsive-design

请您查看以下LINK,并告诉我为什么地图没有响应?我也有一些正确定位的问题,如果你能帮助我在页面中正确地拟合地图,我感激不尽。

这也是我的CSS和Html,

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
  <a class="brand" href="#">Brand</a>
  <div class="nav-collapse collapse" id="spanClasses">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li class="divider"></li>
      <li><a href="#">Link</a></li>
      <li class="divider"></li>
      <li><a href="#">Link</a></li>
      <li class="divider"></li>
    </ul>
  </div>
</div>
</div>
</div>
</div>
<div id="map">  
 <div id="map_canvas"></div>    
</div>

和css:

body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;} 

1 个答案:

答案 0 :(得分:1)

地图不是图像,在缩小浏览器尺寸时不会缩小尺寸