Question

我正在尝试使用cordova和boostrap开发应用程序。

薄的是身体里有谷歌地图但是当我运行应用程序时，这张地图并没有使用整个空间。

这是mi html。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!--<meta name="viewport" content="minimal-ui, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/boostrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/boostrap-theme.min.css">


<title>On Board</title>
</head>
<body>

<div class="container">

  <div class="row">

    

      <div data-role="header" data-position="fixed" data-tap-toggle="false" id="cabecera">
		    <div id="logo"><img id="logo_superior" src="img/inicio_b.png" /></div>
          <h1>On Board</h1>
  	   
    	<div id="triangulo"></div>
      </div>
	<!-- /header -->
  </div>

<div class="container fill">

  <div class="row">
   
      <div id="map" class="col-sm-8">      
  <!--Map load here-->
      </div>
  </div>    
</div>

	


<!-- /footer -->
</div><!-- /page -->

<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/jquery.2.2.0.min.js"></script>
<script type="text/javascript" src="js/boostrap.js"></script>
<script type="text/javascript" src="js/boostrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkmGp8fX_HqSM2ArrwRouRJV60fuA3sqo"></script>
<script type="text/javascript" src="js/index.js"></script> 
<script type="text/javascript" src="js/geolocation_gmaps.js"></script>
</body>
</html>

＆＃13;

我该怎么办？

我使用bootstrap 3和jquery。

Answer 1

你可以使用css来获得你想要的任何大小。

由于它包含在bootstrap中，它将继承父类样式定义，例如.row {margin-right ..}

您可以将#map放在外面并调整到所需的值。例如：

#map {
   position : absolute;
   top : 0;
   left : 0;
   right : 0;
   bottom : 0;
   width:100%;
   height:100%;
   margin:0;
   padding:0;
}

boostrap cordova app全高

1 个答案: