Css 推特引导&；谷歌地图

我的应用程序中有一个导航栏和100%x 100%的谷歌地图。我想在右边添加一个带有不同过滤器的边栏。将其添加到右侧的原因是，当正确的内容被推到下方时，在较小的屏幕上会有更好的体验

当我仅在最后一个导航条div之后添加贴图时，贴图会使用流体（%）值呈现全屏，如下所示：

地图可见：

<div class="navbar">
    <nav bar stuff......>
</div>
<div id="map-canvas"></div>

如果我试图将贴图添加到跨度内以控制其大小并添加侧栏，则贴图不可见

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div id="map-canvas"></div>
        </div>
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

侧栏

我不想给地图添加固定值，因为它违背了流体的目的

---

提前感谢您提供有关如何使地图在容器流体中可见的提示。

将我以前找到的答案作为评论发布，但为了使其更可见，以下是答案：

您必须添加一个javascript回调来手动设置高度 例如，调整窗口大小时贴图画布的大小

---

我已经做了

我第一次尝试与你的问题相同。引导内容选项卡中的GPS地图。 我只是用tab click事件加载或初始化映射，如下所示

var map = undefined;
var marker = undefined;
var position = [13.821805500000002, 100.84968549999999];
var latlng;

function initialize() {

    latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true,
        title: "Your current location!"
    });

    google.maps.event.addListener(marker, 'drag', function() {
        $('#txtlat').val(marker.position.lat());
        $('#txtlng').val(marker.position.lng());
    }
    );
}

    $(document).ready(function() {
          $("div.tabbable ul.nav  a[href=#gps_tab]").bind('click', function() {
                  initialize();
                 $("#map_canvas").show();
           });
    });

---

这个布局看起来不错，也许您已经在CSS中定义了大小、边框、边距或填充值？如果没有，您可以尝试删除列表中的“well”类，如果这是问题所在，只需编写一个内部包装器div作为

nav-nav-list的子级即可。地图的高度设置为零。链接到答案。
var map = undefined;
var marker = undefined;
var position = [13.821805500000002, 100.84968549999999];
var latlng;

function initialize() {

    latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true,
        title: "Your current location!"
    });

    google.maps.event.addListener(marker, 'drag', function() {
        $('#txtlat').val(marker.position.lat());
        $('#txtlng').val(marker.position.lng());
    }
    );
}

    $(document).ready(function() {
          $("div.tabbable ul.nav  a[href=#gps_tab]").bind('click', function() {
                  initialize();
                 $("#map_canvas").show();
           });
    });