Twitter Bootstrap 中的 Div 崩溃答案

【问题标题】：Div collapse in Twitter BootstrapTwitter Bootstrap 中的 Div 崩溃
【发布时间】：2016-08-05 14:58:15
【问题描述】：

我正在尝试通过 Bootstrap 将 Google 地图添加到 2 列网格。但是我遇到了一个问题，地图所在的列已经“折叠”，所以我只能看到应该嵌入的地图的最顶部。我尝试将 html 和 body 元素设置为 100% 高度，然后将地图所在的 div 设置为 30%，但没有运气。我错过了什么吗？下面的代码...

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

【问题讨论】：

我无法运行您的代码示例，它会出现有关无效密钥的错误。但是，无论如何。我记得几个月前有过类似的问题，我认为是地图的比例造成的。尝试保持标准的谷歌地图比例宽度和高度，让我们看看会发生什么。

标签： html css twitter-bootstrap google-maps

【解决方案1】：

用它来解决你的问题

#map{height:250px;}

【讨论】：

谢谢。这可行，但如果可能的话，我试图保留设备响应能力的百分比设置。
#map{ 高度：250px;高度：计算（100% -255px）； } Asi lo he probado desde mi movil y funciona！ :)
哈哈！ Muchos Gracias!