在Twitter的Div摺疊Bootstrap

我想通過Bootstrap將Google Map添加到2列網格。然而，我遇到了一個問題，即地圖所在的列已經'摺疊'了，所以我只能看到應該嵌入的地圖的頂部。我已經嘗試在100％高度設置html和body元素，然後設置地圖以30％爲單位的div，但沒有運氣。我錯過了什麼嗎？下面的代碼...在Twitter的Div摺疊Bootstrap

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Basic Bootstrap Template</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional Bootstrap theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<style> 
    html{height:100%;} 
    body{height:100%;} 
    #map{height:30%;} 
</style> 
</head> 
<body> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Testing</h1> 
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <form> 
        <input type="range" name="points" min="0" max="1000"> 
       </form> 
      </div> 
      <div id ="map" class="col-md-9"> 
      </div> 
     </div> 
    </div> 
     <script> 
      var map; 
      var mapDiv = document.getElementById('map'); 

      var placesMap = { 
       belfast: { 
        center:{lat: 54.605035, lng:-5.832087}, 
        population:50000 
       }, 
       lisburn: { 
        center:{lat: 54.516246, lng:-6.058010599999989}, 
        population:40000 
       }, 
       portadown: { 
        center:{lat: 54.420333, lng:-6.454839}, 
        population:30000 
       }, 
       bangor: { 
        center:{lat: 54.643786, lng:-5.624201}, 
        population:20000 
       } 
      }; 

      //Called on page load by callback attribute in Google Maps API script source 
      function initMap() { 
       map = new google.maps.Map(mapDiv, { 
         center:{lat:54.605035,lng:-5.832087}, 
         zoom:8 
        }); 

       for (place in placesMap) { 
        var placeCircle = new google.maps.Circle({ 
         strokeColor: '#FF0000', 
         strokeOpacity: 0.8, 
         strokeWeight: 2, 
         fillColor: '#FF0000', 
         fillOpacity: 0.35, 
         map: map, 
         center:placesMap[place].center, 
         radius: Math.sqrt(placesMap[place].population) * 100 
        }); 
       } 
      } 
     </script> 
<!-- Google api script --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKeyRemoved&callback=initMap"></script> 

</body> 
</html>

來源

2016-08-05 Dean Roulston

我不能運行的代碼示例，它thows關於無效鍵錯誤。但是，無論如何。我記得幾個月前有類似的問題，我認爲這是由地圖的比例造成的。嘗試維持一個標準的谷歌地圖比例寬度和高度，讓我們看看會發生什麼。 –

使用此爲您解決問題

#map{height:250px;}

來源

2016-08-05 15:13:47 XSDesings

謝謝。這很有效，但如果可能的話，我試圖保持設備響應的百分比設置。 –

#map { height：250px; 身高：calc（100％-255px）; } Asi lo he probado desde mi movil y funciona！ :) – XSDesings

哈哈！ Muchos Gracias！ –

在Twitter的Div摺疊Bootstrap

回答

相關問題